HTML and CSS Reference
• 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
• 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
• 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.