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:
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 pagenav
for sets of navigation linksarticle
for independent, self-contained contentsection
for sections like chapters, typically with a headingaside
for content indirectly related to its surroundings, like a sidebarfooter
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:
Most of these you'll already know: p
, hr
, ul
, li
, div
etc. But are you using these:
figure
: any kind of illustrationfigcaption
: must be a child of figure
, serves as a caption for the illustrationmenu
: 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 .
Of these you'll know many as well: a
, em
, strong
, small
etc. What about these:
s
: content that is no longer accurate or relevantq
: inline quotationsabbr
: 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 datestime
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 examplekbd
: 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 .