Semantic HTML

Besides their default styling properties, HTML elements have a semantic meaning. For example, an h1 tag is usually styled with a larger font and bold, while it denotes "the single most important headline in its context".

While CSS enables us to style almost any HTML element like anything that is needed, choosing HTML elements corresponding to the meaning of their content has a few advantages:

• HTML becomes a little clearer
• Edge cases have already been considered and implemented:
  • Keyboard support (tabbing, arrow keys)
  • States (buttons, form elements)
• Interpretation of content is simplified for parsers (screen readers, search engine spiders)

Sectioning HTML documents

HTML5 brought a batch of new section elements, the most important being:

• header for introductory content in its context, e.g. within a section or an article
• main for the single main content of a page
• nav for sets of navigation links
• article for independent, self-contained content
• section for sections like chapters, typically with a heading
• aside for content indirectly related to its surroundings, like a sidebar
• footer for a footer in its context, e.g. the page or an article

See purpose and examples on the HTML Standard site Show archive.org snapshot .

There is a detailed description at https://css-tricks.com/how-to-section-your-html/#sectioning-content Show archive.org snapshot , from whence the following illustration is taken:

Grouping content

Most of these you'll already know: p, hr, ul, li, div etc. But are you using these:

• figure: any kind of illustration
• figcaption: must be a child of figure, serves as a caption for the illustration
• menu: a semantic alternative to ul to express unordered lists of commands, e.g. a toolbar.

Did you know a div can be used to group dt and dd inside a dl?

See all grouping elements in the spec Show archive.org snapshot .

Text-level semantics

Of these you'll know many as well: a, em, strong, small etc. What about these:

• s: content that is no longer accurate or relevant
• q: inline quotations
• abbr: an acronym. Its title attribute may be used to provide the expanded version.
• data: some data, where the machine-readable form is given in the value attribute. E.g. for dates
• time Show archive.org snapshot : some datetime expression (see link for examples); if not machine-readable, may provide a machine-readable variant in its datetime attribute.
• code: inline code example
• kbd: user input, usually keys. May be nested for key combinations like Ctrl + A.

See purpose and examples on the HTML Standard site Show archive.org snapshot .