5. Review of Basic HTML Tags

Last time, we learned some very basic HTML tags. Let's review them.
Notation: We will use the terms "element" and "tag" interchangeably, but remember
that tags refer to the text that you write in order to specify an HTML element.

5.1 Block Elements

HTML elements are either block-level elements or inline-level elements. A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The following are the most commonly used block-level elements. For a full list of block-level elements, see here.

5.1.1 <div>

The <div> tag is short for Content Division tag. It is the generic container for any content.

Because <div> is meant to enclose content, it is specified using an opening tag and a closing tag:

<div>
  I am some text inside of a div element. I love divs!
</div>

5.1.2 <p>

The <p> tag is short for Paragraph tag, and is meant to specifically enclose a single paragraph of text.

It is also specified using an opening tag and a closing tag:

<div>
  <p>
    Here is one paragraph inside of a div element. The only time I use paragraph elements is
    when I want to separate text nicely. However that happens a lot when I'm writing text-only websites.
  </p>
  <p>
    Here is another paragraph still inside of the same div element. All browsers will by default separate
    paragraph elements with a little bit of vertical space so they look nice.
  </p>
</div>

5.1.3 List elements - <ul> and <ol>

The <ul> and <ol> tags stand for unordered lists and ordered lists, respectively. The unordered list is rendered as a list of bullet points, while the ordered list is typically rendered as a numbered list by most browsers.

Additionally, each element of the list must be enclosed by its own tag - <li>, the list element tag. Note that list tags are also block-level elements.

The full list is therefore specified by an opening tag, a collection of list elements, and a closing tag:

<ul>
  <li>Here is some text inside of the first bullet point.</li>
  <li>
    <p>
      Here is a PARAGRAPH of text inside of the second bullet point.
    </p>
    <p>
      Another paragraph also in the second bullet point!! In fact, since list elements are
      just enumerable block-level elements we can add whatever we want inside of them.
    </p>
  </li>
  <li>
    Here is the third bullet point. Nothing special here.
  </li>
</ul>

<p>My top 5 places to eat in Berkeley:</p>
<ol>
  <li>Thai Noodle</li>
  <li>El Burro Picante</li>
  <li>Thai Basil</li>
  <li>Toss</li>
  <li>Shihlin</li>
</ol>

5.1.4 Heading Elements - <h1> through <h6>

The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags are section heading tags that can be used as section titles. <h1> is the highest section level (most important) and <h6> is the lowest section level.

<h1>My very important announcement</h1>

<p>
  I have decided that I have had enough of my roommate's hoverboard. He keeps hoverboarding around everywhere. It's really annoying
  and I wish he would stop.
</p>

<h2>My less important addendum</h2>

<p>
  Also, he hasn't watered the plant in like a month and the plant's leaves are starting to turn brown and fall off. This is not quite as important but I really wish he would start watering the plant like he said he would.
</p>

5.2 Inline Elements

Inline elements do not start on new lines and only take up as much width as necessary.

The following are some of the most commonly used inline elements. See a full list of inline elements here.

5.2.1 <span>

The <span> tag is a generic inline container for text content. Like the <div> tag, it does not inherently represent anything.

<p>
  Here is some text with a <span>text enclosed in a span element</span> in the middle of the sentence.
</p>

5.2.2 The Anchor Tag - <a>

The <a> tag stands for anchor tag, and is used to link to other pages, files, locations in the same page, or any URL.

This tag has an opening tag and a closing tag, and encloses the display text of the link. The link itself is specified by the href attribute of the tag. The following HTML code creates a link to google.com, where the display text of the link is "Go to google":

<a href="google.com">Click me to go to google!</a>

Additionally, the anchor tag is an inline element, so it can be used within a paragraph of text without disrupting the flow of the page:

<p>
  This is a long paragraph of text. My favorite soda is Sprite.
  Did you know that Sprite is manufactured by <a href="http://www.coca-cola.com/global/">Coca-Cola</a>?
  Wow. Coca-Cola makes a ton of great sodas. Too bad the original Coca-Cola soda tastes like garbage.
</p>

Moreover, although it is an inline-tag, we can enclose any type of element using anchor tags:

<a href="berkeley.edu">
  <div>
    This entire section is now a link to Berkeley's website. Wow. It's like a button.
  </div>
</a>

There are a couple different ways to specify links using the href attribute of the anchor tag.

Absolute links are basically just the full URL, e.g. <a href="https://www.google.com/">Go to google!</a>. These are most useful for linking to other websites.

However, sometimes we just want to link to another page in the same website that we're currently on. For example, on my personal website at theandrewchan.github.io, I have some links to the about page of my website, theandrewchan.github.io/about. Since this page is on the same website, I can just specify a relative link with <a href="/about">Go to about page</a>, where the link starting with a forward slash (/) indicates that the remainder of the link is relative to the root of the website.

5.2.3 The Image Tag - <img>

The <img> tag is used to embed images onto the HTML document. This element does not enclose any content, so there is no opening and closing tag - only a single tag. The image to be embedded is specified fully by the tag's src attribute, which specifies the URL of the image file:

Say hello to my favorite professor:
<img src="https://people.eecs.berkeley.edu/~sahai/sahai.png">

results matching ""

    No results matching ""