This is a snapshot of an early working draft and has therefore been superseded by the HTML standard.

This document will not be further updated.

HTML 5

Call For Comments — 27 October 2007

3.8. Sections

Sectioning elements are elements that divide the page into, for lack of a better word, sections. This section describes HTML's sectioning elements and elements that support them.

Some elements are scoped to their nearest ancestor sectioning element. For example, address elements apply just to their section. For such elements x, the elements that apply to a sectioning element e are all the x elements whose nearest sectioning element is e.

3.8.1. The body element

Sectioning element.

Contexts in which this element may be used:
As the second element in an html element.
Content model:
Zero or more block-level elements.
Element-specific attributes:
None.
DOM interface:
No difference from HTMLElement.

The body element represents the main content of the document.

The body element potentially has a heading. See the section on headings and sections for further details.

In conforming documents, there is only one body element. The document.body DOM attribute provides scripts with easy access to a document's body element.

Some DOM operations (for example, parts of the drag and drop model) are defined in terms of "the body element". This refers to a particular element in the DOM, as per the definition of the term, and not any arbitrary body element.

3.8.2. The section element

Sectioning block-level element.

Contexts in which this element may be used:
Where block-level elements are expected.
Content model:
Zero or more style elements, followed by zero or more block-level elements.
Element-specific attributes:
None.
DOM interface:
No difference from HTMLElement.

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header, possibly with a footer.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, contact information.

Each section element potentially has a heading. See the section on headings and sections for further details.

3.8.3. The nav element

Sectioning block-level element.

Contexts in which this element may be used:
Where block-level elements are expected.
Content model:
Zero or more block-level elements, or inline-level content (but not both).
Element-specific attributes:
None.
DOM interface:
No difference from HTMLElement.

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

When used as an inline-level content container, the element represents a paragraph.

Each nav element potentially has a heading. See the section on headings and sections for further details.

3.8.4. The article element

Sectioning block-level element.

Contexts in which this element may be used:
Where block-level elements are expected.
Content model:
Zero or more style elements, followed by zero or more block-level elements.
Element-specific attributes:
None.
DOM interface:
No difference from HTMLElement.

The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.

An article element is "independent" in that its contents could stand alone, for example in syndication. However, the element is still associated with its ancestors; for instance, contact information that applies to a parent body element still covers the article as well.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a Web log entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the Web log entry.

Author information associated with an article element (q.v. the address element) does not apply to nested article elements.

Each article element potentially has a heading. See the section on headings and sections for further details.

3.8.5. The blockquote element

Sectioning block-level element, and structured inline-level element.

Contexts in which this element may be used:
Where block-level elements are expected.
Where structured inline-level elements are allowed.
Content model:
Zero or more block-level elements.
Element-specific attributes:
cite
DOM interface:
interface HTMLQuoteElement : HTMLElement {
           attribute DOMString cite;
};

The HTMLQuoteElement interface is also used by the q element.

The blockquote element represents a section that is quoted from another source.

Content inside a blockquote must be quoted from another source, whose URI, if it has one, should be cited in the cite attribute.

If the cite attribute is present, it must be a URI (or IRI). User agents should allow users to follow such citation links.

If a blockquote element is preceeded or followed by a p element that contains a single cite element and is itself not preceeded or followed by another blockquote element and does not itself have a q element descendant, then, the citation given by that cite element gives the source of the quotation contained in the blockquote element.

Each blockquote element potentially has a heading. See the section on headings and sections for further details.

The cite DOM attribute reflects the element's cite content attribte.

The best way to represent a conversation is not with the cite and blockquote elements, but with the dialog element.

3.8.6. The aside element

Sectioning block-level element.

Contexts in which this element may be used:
Where block-level elements are expected.
Content model:
Zero or more style elements, followed by either zero or more block-level elements, or inline-level content (but not both).
Element-specific attributes:
None.
DOM interface:
No difference from HTMLElement.

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

When used as an inline-level content container, the element represents a paragraph.

Each aside element potentially has a heading. See the section on headings and sections for further details.

3.8.7. The h1, h2, h3, h4, h5, and h6 elements

Block-level elements.

Contexts in which these elements may be used:
Where block-level elements are expected.
Content model:
Significant strictly inline-level content.
Element-specific attributes:
None.
DOM interface:
No difference from HTMLElement.

These elements define headers for their sections.

The semantics and meaning of these elements are defined in the section on headings and sections.

These elements have a rank given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.

These elements must not be empty.

3.8.8. The header element

Block-level element.

Contexts in which this element may be used:
Where block-level elements are expected and there are no header ancestors.
Content model:
Zero or more block-level elements, including at least one descendant h1, h2, h3, h4, h5, or h6 element, but no sectioning element descendants, no header element descendants, and no footer element descendants.
Element-specific attributes:
None.
DOM interface:
No difference from HTMLElement.

The header element represents the header of a section. Headers may contain more than just the section's heading — for example it would be reasonable for the header to include version history information.

header elements must not contain any header elements, footer elements, or any sectioning elements (such as section) as descendants.

header elements must have at least one h1, h2, h3, h4, h5, or h6 element as a descendant.

For the purposes of document summaries, outlines, and the like, header elements are equivalent to the highest ranked h1-h6 element descendant (the first such element if there are multiple elements with that rank).

Other heading elements indicate subheadings or subtitles.

Here are some examples of valid headers. In each case, the emphasised text represents the text that would be used as the header in an application extracting header data and ignoring subheadings.

<header>
 <h1>The reality dysfunction</h1>
 <h2>Space is not the only void</h2>
</header>
<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>
<header>
 <h1>Scalable Vector Graphics (SVG) 1.2</h1>
 <h2>W3C Working Draft 27 October 2004</h2>
 <dl>
  <dt>This version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
  <dt>Previous version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
  <dt>Latest version of SVG 1.2:</dt>
  <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd>
  <dt>Latest SVG Recommendation:</dt>
  <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd>
  <dt>Editor:</dt>
  <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
  <dt>Authors:</dt>
  <dd>See <a href="#authors">Author List</a></dd>
 </dl>
 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic ...
</header>

The section on headings and sections defines how header elements are assigned to individual sections.

The rank of a header element is the same as for an h1 element (the highest rank).

Block-level element.

Contexts in which this element may be used:
Where block-level elements are expected.
Content model:
Either zero or more block-level elements, but with no h1, h2, h3, h4, h5, h6, header, or footer elements as descendants, and with no sectioning elements as descendants; or, inline-level content (but not both).
Element-specific attributes:
None.
DOM interface:
No difference from HTMLElement.

The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

footer elements must not contain any footer, header, h1, h2, h3, h4, h5, or h6 elements, or any of the sectioning elements (such as section), as descendants.

When used as an inline-level content container, the element represents a paragraph.

Contact information for the section given in a footer should be marked up using the address element.

3.8.10. The address element

Block-level element.

Contexts in which this element may be used:
Where block-level elements are expected.
Content model:
Inline-level content.
Element-specific attributes:
None.
DOM interface:
No difference from HTMLElement.

The address element represents a paragraph of contact information for the section it applies to.

For example, a page at the W3C Web site related to HTML might include the following contact information:

<ADDRESS>
 <A href="../People/Raggett/">Dave Raggett</A>, 
 <A href="../People/Arnaud/">Arnaud Le Hors</A>, 
 contact persons for the <A href="Activity">W3C HTML Activity</A>
</ADDRESS>

The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are contact information for the section. (The p element is the appropriate element for marking up such addresses.)

The address element must not contain information other than contact information.

For example, the following is non-conforming use of the address element:

<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>

Typically, the address element would be included with other information in a footer element.

To determine the contact information for a sectioning element (such as a document's body element, which would give the contact information for the page), UAs must collect all the address elements that apply to that sectioning element and its ancestor sectioning elements. The contact information is the collection of all the information given by those elements.

Contact information for one sectioning element, e.g. an aside element, does not apply to its ancestor elements, e.g. the page's body.

3.8.11. Headings and sections

The h1-h6 elements and the header element are headings.

The first heading in a sectioning element gives the header for that section. Subsequent headers of equal or higher rank start new (implied) sections, headers of lower rank start subsections that are part of the previous one.

Sectioning elements other than blockquote are always considered subsections of their nearest ancestor sectioning element, regardless of what implied sections other headings may have created. However, blockquote elements are associated with implied sections. Effectively, blockquote elements act like sections on the inside, and act opaquely on the outside.

For the following fragment:

<body>
 <h1>Foo</h1>
 <h2>Bar</h2>
 <blockquote>
  <h3>Bla</h3>
 </blockquote>
 <p>Baz</p>
 <h2>Quux</h2>
 <section>
  <h3>Thud</h3>
 </section>
 <p>Grunt</p>
</body>

...the structure would be:

  1. Foo (heading of explicit body section)
    1. Bar (heading starting implied section)
      1. Bla (heading of explicit blockquote section)
      Baz (paragraph)
    2. Quux (heading starting implied section)
    3. Thud (heading of explicit section section)
    Grunt (paragraph)

Notice how the blockquote nests inside an implicit section while the section does not (and in fact, ends the earlier implicit section so that a later paragraph is back at the top level).

Sections may contain headers of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

Authors are also encouraged to explictly wrap sections in sectioning elements, instead of relying on the implicit sections generated by having multiple heading in one sectioning element.

For example, the following is correct:

<body>
 <h4>Apples</h4>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <h6>Sweet</h6>
  <p>Red apples are sweeter than green ones.</p>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
 </section>
</body>

However, the same document would be more clearly expressed as:

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <section>
   <h3>Sweet</h3>
   <p>Red apples are sweeter than green ones.</p>
  </section>
 </section>
 <section>
  <h2>Color</h2>
  <p>Apples come in various colors.</p>
 </section>
</body>

Both of the documents above are semantically identical and would produce the same outline in compliant user agents.

3.8.11.1. Creating an outline

Documents can be viewed as a tree of sections, which defines how each element in the tree is semantically related to the others, in terms of the overall section structure. This tree is related to the document tree, but there is not a one-to-one relationship between elements in the DOM and the document's sections.

The tree of sections should be used when generating document outlines, for example when generating tables of contents.

To derive the tree of sections from the document tree, a hypothetical tree is used, consisting of a view of the document tree containing only the h1-h6 and header elements, and the sectioning elements other than blockquote. Descendants of h1-h6, header, and blockquote elements must be removed from this view.

The hypothetical tree must be rooted at the root element or at a sectioning element. In particular, while the sections inside blockquotes do not contribute to the document's tree of sections, blockquotes can have outlines of their own.

UAs must take this hypothetical tree (which will become the outline) and mutate it by walking it depth first in tree order and, for each h1-h6 or header element that is not the first element of its parent sectioning element, inserting a new sectioning element, as follows:

If the element is a header element, or if it is an h1-h6 node of rank equal to or higher than the first element in the parent sectioning element (assuming that is also an h1-h6 node), or if the first element of the parent sectioning element is a sectioning element:
Insert the new sectioning element as the immediately following sibling of the parent sectioning element, and move all the elements from the current heading element up to the end of the parent sectioning element into the new sectioning element.
Otherwise:
Move the current heading element, and all subsequent siblings up to but excluding the next sectioning element, header element, or h1-h6 of equal or higher rank, whichever comes first, into the new sectioning element, then insert the new sectioning element where the current header was.

The outline is then the resulting hypothetical tree. The ranks of the headers become irrelevant at this point: each sectioning element in the hypothetical tree contains either no or one heading element child. If there is one, then it gives the section's heading, of there isn't, the section has no heading.

Sections are nested as in the hypothetical tree. If a sectioning element is a child of another, that means it is a subsection of that other section.

When creating an interactive table of contents, entries should jump the user to the relevant section element, if it was a real element in the original document, or to the heading, if the section element was one of those created during the above process.

Selecting the first section of the document therefore always takes the user to the top of the document, regardless of where the first header in the body is to be found.

The hypothetical tree (before mutations) could be generated by creating a TreeWalker with the following NodeFilter (described here as an anonymous ECMAScript function). [DOMTR] [ECMA262]

function (n) {
  // This implementation only knows about HTML elements.
  // An implementation that supports other languages might be
  // different.

  // Reject anything that isn't an element.
  if (n.nodeType != Node.ELEMENT_NODE)
    return NodeFilter.FILTER_REJECT;

  // Skip any descendants of headings.
  if ((n.parentNode && n.parentNode.namespaceURI == 'http://www.w3.org/1999/xhtml') &&
      (n.parentNode.localName == 'h1' || n.parentNode.localName == 'h2' ||
       n.parentNode.localName == 'h3' || n.parentNode.localName == 'h4' ||
       n.parentNode.localName == 'h5' || n.parentNode.localName == 'h6' ||
       n.parentNode.localName == 'header'))
    return NodeFilter.FILTER_REJECT;

  // Skip any blockquotes.
  if ((n.namespaceURI == 'http://www.w3.org/1999/xhtml') &&
      (n.localName == 'blockquote'))
    return NodeFilter.FILTER_REJECT;

  // Accept HTML elements in the list given in the prose above.
  if ((n.namespaceURI == 'http://www.w3.org/1999/xhtml') &&
      (n.localName == 'body' || /*n.localName == 'blockquote' ||*/
       n.localName == 'section' || n.localName == 'nav' ||
       n.localName == 'article' || n.localName == 'aside' ||
       n.localName == 'h1' || n.localName == 'h2' ||
       n.localName == 'h3' || n.localName == 'h4' ||
       n.localName == 'h5' || n.localName == 'h6' ||
       n.localName == 'header'))
    return NodeFilter.FILTER_ACCEPT;

  // Skip the rest.
  return NodeFilter.FILTER_SKIP;
}
3.8.11.2. Determining which heading and section applies to a particular node

Given a particular node, user agents must use the following algorithm, in the given order, to determine which heading and section the node is most closely associated with. The processing of this algorithm must stop as soon as the associated section and heading are established (even if they are established to be nothing).

  1. If the node has an ancestor that is a header element, then the associated heading is the most distant such ancestor. The associated section is that header's associated section (i.e. repeat this algorithm for that header).
  2. If the node has an ancestor that is an h1-h6 element, then the associated heading is the most distant such ancestor. The associated section is that heading's section (i.e. repeat this algorithm for that heading element).
  3. If the node is an h1-h6 element or a header element, then the associated heading is the element itself. The UA must then generate the hypothetical section tree described in the previous section, rooted at the nearest section ancestor (or the root element if there is no such ancestor). If the parent of the heading in that hypothetical tree is an element in the real document tree, then that element is the associated section. Otherwise, there is no associated section element.
  4. If the node is a sectioning element, then the associated section is itself. The UA must then generate the hypothetical section tree described in the previous section, rooted at the section itself. If the section element, in that hypothetical tree, has a child element that is an h1-h6 element or a header element, then that element is the associated heading. Otherwise, there is no associated heading element.
  5. If the node is a footer or address element, then the associated section is the nearest ancestor sectioning element, if there is one. The node's associated heading is the same as that sectioning element's associated heading (i.e. repeat this algorithm for that sectioning element). If there is no ancestor sectioning element, the element has no associated section nor an associated heading.
  6. Otherwise, the node is just a normal node, and the document has to be examined more closely to determine its section and heading. Create a view rooted at the nearest ancestor sectioning element (or the root element if there is none) that has just h1-h6 elements, header elements, the node itself, and sectioning elements other than blockquote elements. (Descendants of any of the nodes in this view can be ignored, as can any node later in the tree than the node in question, as the algorithm below merely walks backwards up this view.)
  7. Let n be an iterator for this view, initialised at the node in question.
  8. Let c be the current best candidate heading, initially null, and initially not used. It is used when top-level heading candidates are to be searched for (see below).
  9. Repeat these steps (which effectively goes backwards through the node's previous siblings) until an answer is found:
    1. If n points to a node with no previous sibling, and c is null, then return the node's parent node as the answer. If the node has no parent node, return null as the answer.
    2. Otherwise, if n points to a node with no previous sibling, return c as the answer.
    3. Adjust n so that it points to the previous sibling of the current position.
    4. If n is pointing at an h1 or header element, then return that element as the answer.
    5. If n is pointing at an h2-h6 element, and heading candidates are not being searched for, then return that element as the answer.
    6. Otherwise, if n is pointing at an h2-h6 element, and either c is still null, or c is a heading of lower rank than this one, then set c to be this element, and continue going backwards through the previous siblings.
    7. If n is pointing at a sectioning element, then from this point on top-level heading candidates are being searched for. (Specifically, we are looking for the nearest top-level header for the current section.) Continue going backwards through the previous siblings.
  10. If the answer from the previous step (the loop) is null, which can only happen if the node has no preceeding headings and is not contained in a sectioning element, then there is no associated heading and no associated section.
  11. Otherwise, if the answer from the earlier loop step is a sectioning element, then the associated section is that element and the associated heading is that sectioning element's associated heading (i.e. repeat this algorithm for that section).
  12. Otherwise, if the answer from that same earlier step is an h1-h6 element or a header element, then the associated heading is that element and the associated section is that heading element's associated section (i.e. repeat this algorithm for that heading).

Not all nodes have an associated header or section. For example, if a section is implied, as when multiple headers are found in one sectioning element, then a node in that section has an anonymous associated section (its section is not represented by a real element), and the algorithm above does not associate that node with any particular sectioning element.

For the following fragment:

<body>
 <h1>X</h1>
 <h2>X</h2>
 <blockquote>
  <h3>X</h3>
 </blockquote>
 <p id="a">X</p>
 <h4>Text Node A</h4>
 <section>
  <h5>X</h5>
 </section>
 <p>Text Node B</p>
</body>

The associations are as follows (not all associations are shown):

Node Associated heading Associated section
<body> <h1> <body>
<h1> <h1> <body>
<h2> <h2> None.
<blockquote> <h2> None.
<h3> <h3> <blockquote>
<p id="a"> <h2> None.
Text Node A <h4> None.
Text Node B <h1> <body>
3.8.11.3. Distinguishing site-wide headers from page headers

Given the hypothetical section tree, but ignoring any sections created for nav and aside elements, and any of their descendants, if the root of the tree is the body element's section, and it has only a single subsection which is created by an article element, then the header of the body element should be assumed to be a site-wide header, and the header of the article element should be assumed to be the page's header.

If a page starts with a heading that is common to the whole site, the document must be authored such that, in the document's hypothetical section tree, ignoring any sections created for nav and aside elements and any of their descendants, the root of the tree is the body element's section, its heading is the site-wide heading, the body element has just one subsection, that subsection is created by an article element, and that article's header is the page heading.

If a page does not contain a site-wide heading, then the page must be authored such that, in the document's hypothetical section tree, ignoring any sections created for nav and aside elements and any of their descendants, either the body element has no subsections, or it has more than one subsection, or it has a single subsection but that subsection is not created by an article element.

Conceptually, a site is thus a document with many articles — when those articles are split into many pages, the heading of the original single page becomes the heading of the site, repeated on every page.