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 oneheader
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 withinmain
. - footer element (tag name
footer
): Similarly, there can be more than onefooter
, each playing a different role. The footer for the entire page should not be contained withinmain
.
<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 anarticle
within anotherarticle
, as long as the smaller article is also self-contained. - section element (tag name
section
): Asection
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 namefigcaption
). - navigation element (tag name
nav
): The main hyperlinks for navigation can be included in anav
element. There can be more than one such element. There may also be other hyperlinks that do not appear in anav
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.