HTML and CSS Reference
In-Depth Information
• section
: represents a generic document or section in an application. Using
section
cor-
rectly is part art, part science. A
section
should be self-contained, and capable of existing
independently of other sections in the document. Examples can be seen in tasks.html.
• header
: represents the introductory section of an HTML document or section of a doc-
ument: there can be more than one
header
in a document. Examples can be seen in
tasks.html.
• footer
: represents information that should appear at the bottom of an HTML document
or section. Again, there can be more than one
footer
in the document. Examples can be
seen in tasks.html.
• aside
: this is used for content that is loosely associated with other content around it, but
which could be considered separate. An
aside
will often be visually separated from the
content around it with a border or font.
• article
: this should be used to separate content that can be distributed independently from
other content in the document. An example may be a blog post, or a review. This is similar
to
section
, but
article
should only be used for separating content, not generic sections of
the document.
• details
: contains additional details that a user can choose to show or hide.
• summary
: contains a summary of the contents that appear in the
details
tag. The idea
behind this is that the
summary
can be shown to the user when the document loads, and
they can select to view the
details
if they wish to.
• main
: this should be used to surround the main section of a document, stripped of all
headers
,
footers
,
asides
and
menus
. Unlike other tags, this should only be used once per
page. This tag should surround the content that forms the central functionality or content of
the document. Examples can be seen in tasks.html.
• nav
: contains a set of navigation links such as those that commonly appear in the header
section of a web page.
• dialog
: used for dialog boxes and windows. This element supports an attribute called
open
that indicates if the dialog is active to the user.
• wbr
: this is used as a hint to the browser that it could add a line break. This can be useful
if a browser is adding line breaks in the wrong place due to a long word.
• mark
: this can be used to indicate that a piece of text is highlighted. Browsers will add a
background color to the text, which can be overridden in CSS.
