Grouping content

The p element

Categories:

Flow content.

Palpable content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Phrasing content.

Tag omission in text/html:

A <{p}> element's end tag may be omitted if the <{p}> element is immediately followed by an <{address}>, <{article}>, <{aside}>, <{blockquote}>, <{details}>, <{div}>, <{dl}>, <{fieldset}>, <{figcaption}>, <{figure}>, <{footer}>, <{form}>, <{h1}>, <{h2}>, <{h3}>, <{h4}>, <{h5}>, <{h6}>, <{header}>, <{hr}>, <{main}>, <{nav}>, <{ol}>, <{p}>, <{pre}>, <{section}>, <{table}>, or <{ul}>, element, or if there is no more content in the parent element and the parent element is an HTML element that is not an <{a}>, <{audio}>, <{del}>, <{ins}>, <{map}>, <{noscript}>, or <{video}> element.

Content attributes:

Global attributes

[=Allowed ARIA role attribute values=]:

Any role value.

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default or allowed roles.

DOM interface:

        interface HTMLParagraphElement : HTMLElement {};
      

Paragraphs are usually represented visually as blocks of text, separated from adjacent blocks by blank lines. However a style sheet or user agent may present paragraph breaks in a different manner, for instance using inline pilcrows (¶).

The address element

Categories:

Flow content.

Palpable content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Flow content, but with no heading content descendants, no sectioning content descendants, and no <{main}>, <{header}>, <{footer}>, or <{address}> element descendants.

Tag omission in text/html:

Neither tag is omissible

Content attributes:

Global attributes

[=Allowed ARIA role attribute values=]:

Any role value.

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the allowed roles.

DOM interface:

Uses {{HTMLElement}}.

      <div vocab="http://schema.org/" typeof="LocalBusiness">
        <h1><span property="name">Beachwear & Giftware</span></h1>
        <p property="description">
          A superb collection of fine gifts and clothing to accent your stay in Mexico Beach.
        </p>
       <address property="address" typeof="PostalAddress"> 
        <span property="streetAddress">123 Example Street</span>
        <span property="addressLocality">Mexico Beach</span>,
        <span property="addressRegion">FL</span>
       </address> 
        Phone: <span property="telephone">(212) 664-7665</span>
      </div>
    

The hr element

Categories:

Flow content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Nothing.

Tag omission in text/html:

No end tag.

Content attributes:

Global attributes

[=Allowed ARIA role attribute values=]:

separator (default - do not set), none or presentation.

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default or allowed roles.

DOM interface:

        interface HTMLHRElement : HTMLElement {};
      

DPub Roles:

doc-pagebreak

The <{hr}> element does not affect the document's outline.

The pre element

Categories:

Flow content.

Palpable content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Phrasing content.

Tag omission in text/html:

Neither tag is omissible

Content attributes:

Global attributes

[=Allowed ARIA role attribute values=]:

Any role value.

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default or allowed roles.

DOM interface:

        interface HTMLPreElement : HTMLElement {};
      

In the HTML syntax, a leading newline character immediately following the <{pre}> element start tag is stripped.

Authors are encouraged to consider how preformatted text will be experienced when the formatting is lost, as will be the case for users of speech synthesizers, braille displays, and the like. For cases like ASCII art, it is likely that an alternative presentation, such as a textual description, would be more universally accessible to the readers of the document.

This element has rendering requirements involving the bidirectional algorithm.

The blockquote element

Categories:

Flow content.

Sectioning root.

Palpable content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Flow content.

Tag omission in text/html:

Neither tag is omissible

Content attributes:

Global attributes

cite - Link to the source of the quotation.

[=Allowed ARIA role attribute values=]:

Any role value.

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default or allowed roles.

DOM interface:

        interface HTMLQuoteElement : HTMLElement {
          attribute DOMString cite;
        };
      

The HTMLQuoteElement interface is also used by the <{q}> element.

In cases where a page contains contributions from multiple people, such as comments on a blog post, 'another source' can include text from the same page, written by another person.

There is no formal method for indicating the markup in a blockquote is from a quoted source. It is suggested that if the footer or <{cite}> elements are included and these elements are also being used within a blockquote to identify citations, the elements from the quoted source could be annotated with metadata to identify their origin, for example by using the <{global/class}> attribute (a defined extensibility mechanism).

Examples of how to represent a conversation are shown in a later section; it is not appropriate to use the cite and <{blockquote}> elements for this purpose.

The ol element

Categories:

Flow content.

If the element's children include at least one <{li}> element: Palpable content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Zero or more li and script-supporting elements.

Tag omission in text/html:

Neither tag is omissible

Content attributes:

Global attributes

reversed - Number the list backwards.

start - Ordinal value of the first item

type - Kind of list marker.

[=Allowed ARIA role attribute values=]:

list role (default - do not set), directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree.

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default or allowed roles.

DOM interface:

        interface HTMLOListElement : HTMLElement {
          attribute boolean reversed;
          attribute long start;
          attribute DOMString type;
        };
      

For CSS user agents, a mapping for this attribute to the 'list-style-type' CSS property is given in the [[#rendering]] section (the mapping is straightforward: the states above have the same names as their corresponding CSS values).

It is possible to redefine the default CSS list styles used to implement this attribute in CSS user agents; doing so will affect how list items are rendered.

The ul element

Categories:

Flow content.

If the element's children include at least one <{li}> element: Palpable content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Zero or more li and script-supporting elements.

Tag omission in text/html:

Neither tag is omissible

Content attributes:

Global attributes

[=Allowed ARIA role attribute values=]:

list role (default - do not set), directory, group, listbox, menu, menubar, presentation, radiogroup, tablist, toolbar or tree.

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default or allowed roles.

DOM interface:

        interface HTMLUListElement : HTMLElement {};
      

The li element

Categories:

None.

Contexts in which this element can be used:

Inside <{ol}> elements.

Inside <{ul}> elements.

Content model:

Flow content.

Tag omission in text/html:

An <{li}> element's end tag may be omitted if the <{li}> element is immediately followed by another <{li}> element or if there is no more content in the parent element.

Content attributes:

Global attributes

If the element is not a child of an <{ul}>: value

[=Allowed ARIA role attribute values=]:

listitem role (default - do not set), menuitem, menuitemcheckbox, menuitemradio, option, none, presentation, radio, separator, tab or treeitem.

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default or allowed roles.

DOM interface:

        interface HTMLLIElement : HTMLElement {
          attribute long value;
        };
      

DPub Roles:

doc-biblioentry or doc-endnote

While it is conforming to include heading elements (e.g., h2) and Sectioning content inside li elements, it likely does not convey the semantics that the author intended. A heading starts a new section, so a heading in a list implicitly splits the list into spanning multiple sections. Sectioning content explicitly creates a new section and so splits the list into spanning multiple sections.

The dl element

Categories:

Flow content.

If the element's children include at least one name-value group: Palpable content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Either:Zero or more groups each consisting of one or more <{dt}> elements followed by one or more <{dd}> elements, optionally intermixed with script-supporting elements.

Or: One or more <{div}> elements, optionally intermixed with script-supporting elements.

Tag omission in text/html:

Neither tag is omissible

Content attributes:

Global attributes

[=Allowed ARIA role attribute values=]:

list, group, none or presentation.

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default or allowed roles.

DOM interface:

        interface HTMLDListElement : HTMLElement {};
      

DPub Roles:

doc-glossary

When a <{dl}> element does not match its content model, it is often because a <{dd}> element has been used instead of a <{dt}> element, or vice versa.

The dt element

Categories:

None.

Contexts in which this element can be used:

Before dd or <{dt}> elements inside <{dl}> elements.

Before dd or <{dt}> elements inside <{div}> elements that are children of a <{dl}> element.

Content model:

Flow content, but with no <{header}>, <{footer}>, sectioning content, or heading content descendants.

Tag omission in text/html:

A <{dt}> element's end tag may be omitted if the <{dt}> element is immediately followed by another <{dt}> element or a <{dd}> element.

Content attributes:

Global attributes

[=Allowed ARIA role attribute values=]:

term role (default - do not set), listitem

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default role.

DOM interface:

Uses {{HTMLElement}}.

When used within a <{dl}> element, the <{dt}> element does not necessarily represent a term being defined. The <{dfn}> element should be used to represent a term being defined.

The dd element

Categories:

None.

Contexts in which this element can be used:

After dt or <{dd}> elements inside <{dl}> elements.

After dt or <{dd}> elements inside <{div}> elements that are children of a <{dl}> element.

Content model:

Flow content.

Tag omission in text/html:

A <{dd}> element's end tag may be omitted if the <{dd}> element is immediately followed by another <{dd}> element or a <{dt}> element, or if there is no more content in the parent element.

Content attributes:

Global attributes

[=Allowed ARIA role attribute values=]:

definition role (default - do not set)

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default or allowed roles.

DOM interface:

Uses {{HTMLElement}}.

The figure element

Categories:

Flow content.

Sectioning root.

Palpable content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Flow content optionally including a single <{figcaption}> child element.

Tag omission in text/html:

Neither tag is omissible

Content attributes:

Global attributes

[=Allowed ARIA role attribute values=]:

figure role (default - do not set), group, none or presentation.

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default or allowed roles.

DOM interface:

Uses {{HTMLElement}}.

"Self-contained" in this context does not necessarily mean independent. For example, each sentence in a paragraph is self-contained; an image that is part of a sentence would be inappropriate for <{figure}>, but an entire sentence made of images would be fitting.

The figcaption element

Categories:

None.

Contexts in which this element can be used:

As a child of a <{figure}> element.

Content model:

Flow content.

Tag omission in text/html:

Neither tag is omissible

Content attributes:

Global attributes

[=Allowed ARIA role attribute values=]:

group, none or presentation.

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default or allowed roles.

DOM interface:

Uses {{HTMLElement}}.

The main element

Categories:

Flow content.

Palpable content.

Contexts in which this element can be used:

Where flow content is expected, but only if it is a hierarchically correct main element.

Content model:

Flow content.

Tag omission in text/html:

Neither tag is omissible

Content attributes:

Global attributes

[=Allowed ARIA role attribute values=]:

main role (default - do not set).

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default role.

DOM interface:

Uses HTMLElement

The <{main}> element is not sectioning content and has no effect on the document outline.

The <{main}> element is not suitable for identifying the main content areas of sub-sections of a document. The simplest solution is not to mark up the main content of a sub-section at all (leaving it as implicit), but an author could use [[#grouping-content]] or a sectioning content element as appropriate.

The div element

Categories:

Flow content.

Palpable content.

Contexts in which this element can be used:

Where flow content is expected.

As a child of a <{dl}> element.

Content model:

If the element is a child of a dl element: one or more <{dt}> elements followed by one or more <{dd}> elements, optionally intermixed with script-supporting elements.

If the element is not a child of a dl element: Flow content.

Tag omission in text/html:

Neither tag is omissible

Content attributes:

Global attributes

[=Allowed ARIA role attribute values=]:

Any role value.

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default or allowed roles.

DOM interface:

        interface HTMLDivElement : HTMLElement {};
      

Authors are strongly encouraged to view the <{div}> element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the <{div}> element leads to better accessibility for readers and easier maintainability for authors.