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.
body elementhtml
element.
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.
section elementSectioning block-level element.
style elements,
followed by zero or more block-level
elements.
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.
nav elementSectioning block-level element.
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.
article elementSectioning block-level element.
style elements,
followed by zero or more block-level
elements.
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.
blockquote elementSectioning block-level element, and structured inline-level element.
cite
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.
aside elementSectioning block-level element.
style elements,
followed by either zero or more block-level
elements, or inline-level content (but
not both).
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.
h1, h2, h3, h4, h5, and h6 elementsHTMLElement.
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.
header elementheader ancestors.
h1,
h2, h3,
h4, h5, or
h6 element, but no sectioning
element descendants, no header
element descendants, and no footer
element descendants.
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).
footer elementh1, 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).
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.
address elementHTMLElement.
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.
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:
body
section)
blockquote section)
section section)
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.
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:
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:
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;
}
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).
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).
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).
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.
h1-h6 element or a header element, then that element is the
associated heading. Otherwise, there is no associated heading element.
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.
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.)
h1 or header
element, then return that element as the answer.
h2-h6 element, and
heading candidates are not being searched for, then return that element
as the answer.
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.
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>
|
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.