Basic HTML Elements

Learning objectives

You know the basic elements used to present information in a HTML document.
You can use basic HTML elements to create typical HTML content such as lists and tables.

HTML documents consist of elements. The most important elements in terms of displaying information are headings, text paragraphs, lists, and tables. Let's look into these next.

Headings

There are in total six heading elements: <h1>, <h2>, <h3>, <h4>, <h5> and<h6>. The character h comes from the word heading and the number represents the importance of the heading -- the smaller the number, the more important the heading.

Note that the following examples do not contain text paragraphs for clarity. In practice, however, each heading would be followed by text, which would then be followed by potential (sub)headings and their corresponding texts.

The following HTML document contains one of each heading elements. The document is followed by a page, which shows what the document would concretely look like in a browser.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <h1>h1 - heading</h1>
    <h2>h2 - subheading</h2>
    <h3>h3 - subsubheading</h3>
    <h4>h4 - subsubsubheading</h4>
    <h5>h5 - subsubsubsubheading</h5>
    <h6>h6 - subsubsubsubsubheading</h6>
  </body>
</html>

Every HTML document should have at most one main heading (h1) for understandability and accessibility. The main heading tells the reader what the page is about.

Subheadings should be added under the main heading in a logical order. That is, after a subheading one should have either another subheading or a subsubheading, but not a subsubsubheading As an example, the HTML document below is understandable (based on its structure).

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <h1>h1 - main heading</h1>
    <h2>h2 - subheading</h2>
    <h2>h2 - another subheading</h2>
    <h3>h3 - subsubbheading</h3>
    <h3>h3 - another subsubheading</h3>
    <h2>h2 - yet another subheading</h2>
  </body>
</html>

The understandability of the above document stems from the elements being in a logical order. The element h1 (main heading) comes first, which may be followed by a subheading h2. This could be followed by a heading that is of less importance, i.e. h3, but one should never jump into e.g. h6 from h2.

The example below is not very understandable based on its structure. The document starts with a subheading, followed by a main heading. This is followed again by another subheading, after which we see a subsubsubsubheading.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <h2>h2 - subheading</h2>
    <h1>h1 - main heading under a subheading!</h1>
    <h2>h2 - another subheading</h2>
    <h2>h5 - h3 would be more appropriate here</h2>
  </body>
</html>

Imagine the above example from the perspective of a textbook. If we would number the section titles, the page could look like something as the following.

Text paragraphs

Adding text to a HTML document happens through the use of p-elements. The character p comes from the word paragraph.

The document below contains multiple paragraphs, each of which contain text. The paragraphs have been placed under headings.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <h1>Welcome! This is a main heading.</h1>

    <p>This is a paragraph. A paragraph contains
    text as one may assume based on its name.</p>

    <p>There can be multiple paragraphs that are
    placed next to each other. When viewing the
    document with a browser, each paragraph is
    followed with whitespace -- that is, the
    paragraphs on a page are not glued together.</p>

    <p>What the paragraphs actually look like in
    a browser can be adjusted. We will look into
    styling web pages later on.</p>

    <h2>Subheading</h2>

    <p>Text is written under subheading in the
    same way as under main headings (and other
    headings).</p>

  </body>
</html>

Lists

HTML documents may include ordered lists (created with ol element) and unordered lists (created with ul element).

When defining a list and its contents, the list is created using either the ol or the ul element, depending on which type of a list one prefers to use. Inside the list element, list items (created with li element) representing list content are created. Each list item can contain elements or text.

The example below contains a HTML document, which has a numbered list. The list has three list items with the texts item 1, item 2 and item 3.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <h1>Main heading</h1>
    <p>Normal text.</p>
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
    </ol>
  </body>
</html>

Tables

Tables can be created using the element <table>. Table rows are created with the element <tr>, and table cells -- which come inside the table rows -- are created with the element <td> (table data). In the example below, we create a table with four rows and two columns. The data for the columns in each of the rows is created using the table data element.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <h1>Main heading</h1>

    <p>Text paragraph</p>

    <table>
      <tr>
        <td>Element</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>table</td>
        <td>element for creating a table</td>
      </tr>
      <tr>
        <td>tr</td>
        <td>Element for creating a table row</td>
      </tr>
      <tr>
        <td>td</td>
        <td>Element for creating a cell within a row</td>
      </tr>
    </table>
  </body>
</html>

It is possible to highlight (heading) cells in the table. This happens through the use of the <th> element (table heading), which can substitute the table data element <td>. The <th> element is useful, for example, for marking heading rows in a table.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <h1>Main heading</h1>

    <p>Text paragraph</p>

    <table>
      <tr>
        <th>Element</th>
        <th>Description</th>
      </tr>
      <tr>
        <td>table</td>
        <td>element for creating a table</td>
      </tr>
      <tr>
        <td>tr</td>
        <td>Element for creating a table row</td>
      </tr>
      <tr>
        <td>td</td>
        <td>Element for creating a cell within a row</td>
      </tr>
    </table>
  </body>
</html>

Images

Images can be shown using the <img> element. The image element is given attributes, written inside the element tag, which show where the image should be retrieved from and what the image represents.

The value of the attribute src is an address to the image, and the value of the attribute alt is a textual description of the image. The value of an attribute is set using an equals-sign, which is followed by the value in quotes, e.g. alt='a picture of a cat'.

The following HTML document shows an example of the use of the img element. Note that the image element is a void element, and it is closed with a slash at the end of the element (i.e. `<img ... />).

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <img src="image_address" alt="textual description of the image" />
  </body>
</html>

The address of the image, which is given as a value for the src attribute, refers to the location of the image on the internet. When the browser is processing the HTML document, it will go through the elements one by one. When the browser finds an img-element, it will make a request to the address specified in the src attribute, attempting to retrieve the image from the given location.

In the above example, we have used an address that does not exist. Thus, the browser is unable to find the image. In such a case, the browser shows an icon depicting a broken image and the value of the alt attribute in place of the image.

As seen above, the value of the alt tag will be shown in the browser if the image is not found. More importantly, the alt tag can be used to increase the accessibility of the site. If the browser of the user does not show images or the user is using a screen reader due to, e.g., visual impairment, the alt tag helps the user to know what the image is about, without the need to see it.

The address of the image attribute can be used in two different ways. An address that contains the full URI, i.e., the protocol, the host, etc, will lead the browser requesting the content from the full path. If the address contains just a path, the image will be requested either starting from the root of the server (if the src attribute value starts with /) or starting from the current path (if the src attribute value does not start with /).

As an example, when the browser processes the following document, it attempts to retrieve an image from the address https://aalto.fi/example/image.png.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <img src="https://aalto.fi/example/image.png" alt="example image, does not exist" />
  </body>
</html>

Similarly, in the following example, the browser would attempt to retrieve the image from the path /images/image.png of the current host, i.e. protocol://server/images/image.png.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <img src="/images/image.png" alt="example image, does not exist" />
  </body>
</html>