Semantic elements

To categorize a piece of information by its meaning (that is, its semantics), we consider the role that it plays. You can think of breaking up the content into smaller and smaller pieces in a step-by-step process.

Don't be daunted by the length of the list of elements below! None of the rest of the course depends on your mastering this material now, so you can safely proceed, returning to it later. Moreover, as these elements were all first introduced in HTML5, they may not yet be supported by all browsers.

Step 1: Main content

What is the main content of the page? What comes before and what comes after?

Typically, the page is divided into the following three elements:

  • main element (tag name main): Each page can have at most one element of this type. Since it contains the main material on the page, it cannot be contained within any of the other elements listed below.
  • header element (tag name header): There can be more than one header on a page, each providing heading material for all or part of the contents of the page. Each should contain a heading. The header for the entire page should not be contained within main.
  • footer element (tag name footer): Similarly, there can be more than one footer, each playing a different role. The footer for the entire page should not be contained within main.
<body>
  <header>
  </header>
  <main>
  </main>
  <footer>
  </footer>
</body>

Step 2: Articles and sections

Can the main content be broken into self-contained articles? Are there groups of articles that belong in the same section?

The main elements can be divided into sections, and sections can be divided into articles.

  • article element (tag name article): This element is used to designate a self-contained part of the content. It is possible to have an article within another article, as long as the smaller article is also self-contained.
  • section element (tag name section): A section is used as a thematic grouping of material, preceded by a heading. This might be appropriate, for example, for a group of related articles.

Step 3: Other features

Are there any figures? Are there hyperlinks for navigation? Is there any information that is tangential to the main content?

The following elements are used to mark other information by its meaning.

  • figure element (tag name figure): This element can contain an image and a caption element (tag name figcaption).
  • navigation element (tag name nav): The main hyperlinks for navigation can be included in a nav element. There can be more than one such element. There may also be other hyperlinks that do not appear in a nav element.
  • aside element (tag name aside): This element is intended to contain material that is tangential (but still related) to other material in the element that contains the aside.