Common idioms without dedicated elements - HTML 5

The main content of a page — not including headers and footers, navigation links, sidebars, advertisements, and so forth — can be marked up in a variety of ways, depending on the needs of the author.

The simplest solution is to not mark up the main content at all, and just leave it as implicit. Another way to think of this is that the body elements marks up the main content of the page, and the bits that aren't main content are excluded through the use of more appropriate elements like aside and nav.

If the main content is an independent unit of content that one could imagine syndicating independently, then the article element would be appropriate to mark up the main content of the document.

If the main content is not an independent unit of content so much as a section of a larger work, for instance a chapter, then the section element would be appropriate to mark up the main content of the document.

If neither article nor section would be appropriate, but the main content still needs an explicit element, for example for styling purposes, then the div element can be used.

4.13.2 Bread crumb navigation

This specification does not provide a machine-readable way of describing bread-crumb navigation menus. Authors are encouraged to just use a series of links in a paragraph. The nav element can be used to mark the section containing these paragraphs as being navigation blocks.

4.13.3 Tag clouds

This specification does not define any markup specifically for marking up lists of keywords that apply to a group of pages (also known as tag clouds). In general, authors are encouraged to either mark up such lists using ul elements with explicit inline counts that are then hidden and turned into a presentational effect using a style sheet, or to use SVG.

4.13.4 Conversations

This specification does not define a specific element for marking up conversations, meeting minutes, chat transcripts, dialogues in screenplays, instant message logs, and other situations where different players take turns in discourse.

Instead, authors are encouraged to mark up conversations using p elements and punctuation. Authors who need to mark the speaker for styling purposes are encouraged to use span or b. Paragraphs with their text wrapped in the i element can be used for marking up stage directions.

4.13.5 Footnotes

HTML does not have a dedicated mechanism for marking up footnotes. Here are the suggested alternatives.

For annotations, the a element should be used, pointing to an element later in the document. The convention is that the contents of the link be a number in square brackets.

For side notes, longer annotations that apply to entire sections of the text rather than just specific words or sentences, the aside element should be used.

For figures or tables, footnotes can be included in the relevant figcaption or caption element, or in surrounding prose.

4.14 Disabled elements

An element is said to be actually disabled if it falls into one of the following categories:

This definition is used to determine what elements can be focused and which elements match the :disabled pseudo-class.

4.15 Matching HTML elements using selectors

4.15.1 Case-sensitivity

The Selectors specification leaves the case-sensitivity of IDs, classes, element names, attribute names, and attribute values to be defined by the host language. [SELECTORS]

The unique identifier of HTML elements in documents that are in quirks mode must be treated as ASCII case-insensitive for the purposes of selector matching.

Classes from the class attribute of HTML elements in documents that are in quirks mode must be treated as ASCII case-insensitive for the purposes of selector matching.

Attribute and element names of HTML elements in HTML documents must be treated as ASCII case-insensitive for the purposes of selector matching.

Everything else (attribute values on HTML elements, IDs and classes in no-quirks mode and limited-quirks mode, and element names, attribute names, and attribute values in XML documents) must be treated as case-sensitive for the purposes of selector matching.

4.15.2 Pseudo-classes

There are a number of dynamic selectors that can be used with HTML. This section defines when these selectors match HTML elements. [SELECTORS] [CSSUI]

:link

:visited

All a elements that have an href attribute, all area elements that have an href attribute, and all link elements that have an href attribute, must match one of :link and :visited.

Other specifications might apply more specific rules regarding how these elements are to match these pseudo-classes, to mitigate some privacy concerns that apply with straightforward implementations of this requirement.

:active

The :active pseudo-class is defined to match an element while an element is being activated by the user. For the purposes of defining the :active pseudo-class only, an HTML user agent must consider an element as being activated if it is:

An element falling into one of the following categories between the time the user begins to indicate an intent to trigger the element's activation behavior and either the time the user stops indicating an intent to trigger the element's activation behavior, or the time the element's activation behavior has finished running, which ever comes first:
- a elements that have an href attribute
- area elements that have an href attribute
- link elements that have an href attribute
- button elements that are not disabled
- input elements whose type attribute is in the Submit Button, Image Button, Reset Button, or Button state
- command elements that do not have a disabled attribute
- elements that have their tabindex focus flag set
For example, if the user is using a keyboard to push a button element by pressing the space bar, the element would match this pseudo-class in between the time that the element received the keydown event and the time the element received the keyup event.
An element that the user indicates using a pointing device while that pointing device is in the "down" state (e.g. for a mouse, between the time the mouse button is pressed and the time it is depressed).
An element that has a descendant that is currently matching the :active pseudo-class.

:hover

The :hover pseudo-class is defined to match an element while the user designates an element with a pointing device. For the purposes of defining the :hover pseudo-class only, an HTML user agent must consider an element as being one that the user designates if it is:

An element that the user indicates using a pointing device.
An element that has a descendant that the user indicates using a pointing device.
An element that is the labeled control of a label element that is currently matching :hover.

Consider in particular a fragment such as:

<p> <label for=c> <input id=a> </label> <span id=b> <input id=c> </span> </p>

If the user designates the element with ID "a" with their pointing device, then the p element (and all its ancestors not shown in the snippet above), the label element, the element with ID "a", and the element with ID "c" will match the :hover pseudo-class. The element with ID "a" matches it from condition 1, the label and p elements match it because of condition 2 (one of their descendants is designated), and the element with ID "c" matches it through condition 3 (its label element matches :hover). However, the element with ID "b" does not match :hover: its descendant is not designated, even though it matches :hover.

:enabled

The :enabled pseudo-class must match any element falling into one of the following categories:

a elements that have an href attribute
area elements that have an href attribute
link elements that have an href attribute
button elements that are not disabled
input elements that are not disabled
select elements that are not disabled
textarea elements that are not disabled
optgroup elements that do not have a disabled attribute
option elements that are not disabled
command elements that do not have a disabled attribute
li elements that are children of menu elements, and that have a child element that defines a command, if the first such element's Disabled State facet is false (not disabled)
fieldset elements that do not have a disabled attribute

:disabled

The :disabled pseudo-class must match any element that is actually disabled.

:checked

The :checked pseudo-class must match any element falling into one of the following categories:

input elements whose type attribute is in the Checkbox state and whose checkedness state is true
input elements whose type attribute is in the Radio Button state and whose checkedness state is true
option elements whose selectedness is true
command elements whose type attribute is in the Checkbox state and that have a checked attribute
command elements whose type attribute is in the Radio state and that have a checked attribute

:indeterminate

The :indeterminate pseudo-class must match any element falling into one of the following categories:

input elements whose type attribute is in the Checkbox state and whose indeterminate IDL attribute is set to true
progress elements with no value content attribute

:default

The :default pseudo-class must match any element falling into one of the following categories:

button elements that are their form's default button
input elements whose type attribute is in the Submit Button or Image Button state, and that are their form's default button
input elements to which the checked attribute applies and that have a checked attribute
option elements that have a selected attribute

:valid

The :valid pseudo-class must match any element falling into one of the following categories:

elements that are candidates for constraint validation and that satisfy their constraints
form elements that are not the form owner of any elements that themselves are candidates for constraint validation but do not satisfy their constraints

:invalid

The :invalid pseudo-class must match any element falling into one of the following categories:

elements that are candidates for constraint validation but that do not satisfy their constraints
form elements that are the form owner of one or more elements that themselves are candidates for constraint validation but do not satisfy their constraints

:in-range

The :in-range pseudo-class must match all elements that are candidates for constraint validation, have range limitations, and that are neither suffering from an underflow nor suffering from an overflow.

:out-of-range

The :out-of-range pseudo-class must match all elements that are candidates for constraint validation, have range limitations, and that are either suffering from an underflow or suffering from an overflow.

:required

The :required pseudo-class must match any element falling into one of the following categories:

input elements that are required
select elements that have a required attribute
textarea elements that have a required attribute

:optional

The :optional pseudo-class must match any element falling into one of the following categories:

input elements to which the required attribute applies that are not required
select elements that do not have a required attribute
textarea elements that do not have a required attribute

:read-only

:read-write

The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable: [SELECTORS]

input elements to which the readonly attribute applies, and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)
textarea elements that do not have a readonly attribute, and that are not disabled
elements that are editing hosts or editable and are neither input elements nor textarea elements

The :read-only pseudo-class must match all other HTML elements.

:dir(ltr)

The :dir(ltr) pseudo-class must match all elements whose directionality is 'ltr'.

:dir(rtl)

The :dir(rtl) pseudo-class must match all elements whose directionality is 'rtl'.

Another section of this specification defines the target element used with the :target pseudo-class.

This specification does not define when an element matches the :focus or :lang() dynamic pseudo-classes, as those are all defined in sufficient detail in a language-agnostic fashion in the Selectors specification. [SELECTORS]

4.13. Common idioms without dedicated elements

4.13.1 The main part of the content