Some elements, for example address elements, are scoped to their nearest
ancestor sectioning content. For such elements
x, the elements that apply to a sectioning content element e
are all the x elements whose nearest sectioning content ancestor is e.
body elementhtml
element.
interface HTMLBodyElement : HTMLElement {};
The body element represents the main
content of the document.
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 elementHTMLElement.
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.
nav elementHTMLElement.
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. Not all groups of links on a page need to be in a
nav element — only sections that
consist of primary navigation blocks are appropriate for the nav element. In particular, it is common for
footers to have a list of links to various key parts of a site, but the
footer element is more appropriate in
such cases.
In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.
<body>
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Forums</a></p>
</header>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a><li>
<li><a href="today.html">Things sheeple need to wake up for today</a><li>
<li><a href="successes.html">Sheeple we have managed to wake</a><li>
</ul>
</nav>
<article>
<p>...page content would be here...</p>
</article>
<footer>
<p>Copyright © 2006 The Example Company</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
</body>
article elementHTMLElement.
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.
aside elementHTMLElement.
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.
The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.
<aside> <h1>Switzerland</h1> <p>Switzerland, a land-locked country in the middle of geographic Europe, has not joined the geopolitical European Union, though it is a signatory to a number of European treaties.</p> </aside>
The following example shows how an aside is used to mark up a pull quote in a longer article.
... <p>He later joined a large company, continuing on the same work. <q>I love my job. People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. Some people wonder what they would do if they didn't have to work... but I know what I would do, because I was unemployed for a year, and I filled that time doing exactly what I do now.</q></p> <aside> <q> People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. </q> </aside> <p>Of course his work — or should that be hobby? — isn't his only passion. He also enjoys other pleasures.</p> ...
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.
header elementheader element descendants, and no footer element descendants.
HTMLElement.
The header element represents the
header of a section. The element is typically used to group a set of
h1–h6
elements to mark up a page's title with its subtitle or tagline. However,
header elements may contain more than
just the section's headings and subheadings — for example it would
be reasonable for the header to include version history information.
For the purposes of document summaries, outlines, and the like, header elements are equivalent to the highest ranked h1–h6 element
descendant of the header element (the
first such element if there are multiple elements with that rank).
Other heading elements in the header
element indicate subheadings or subtitles.
The rank of a header element is the same as for an h1 element (the highest rank).
The section on headings and sections defines
how header elements are assigned to
individual sections.
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> <h1>Dr. Strangelove</h1> <h2>Or: How I Learned to Stop Worrying and Love the Bomb</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>
footer elementfooter element descendants.
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.
Contact information for the section given in a footer should be marked up using the address element.
Footers don't necessarily have to appear at the end of a section, though they usually do.
Here is a page with two footers, one at the top and one at the bottom, with the same content:
<body> <footer><a href="../">Back to index...</a></footer> <h1>Lorem ipsum</h1> <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <footer><a href="../">Back to index...</a></footer> </body>
address elementfooter element descendants, and no address element descendants.
HTMLElement.
The address element represents the
contact information for the section it applies to. If it applies to the body element, then it instead
applies to the document as a whole.
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 content 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
content element and its ancestor sectioning
content elements. The contact information is the collection of all the
information given by those elements.
Contact information for one sectioning
content 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 element of heading content in an element of sectioning content 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 content elements are always considered subsections of their nearest ancestor element of sectioning content, regardless of what implied sections other headings may have created.
Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own
outlines, but the sections and headers inside these elements do not
contribute to the outlines of their ancestors.
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, containing the "Grunt" paragraph)
section section)
Notice how the section ends the
earlier implicit section so that a later paragraph ("Grunt") 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 elements of sectioning content, instead of relying on the implicit sections generated by having multiple heading in one element of sectioning content.
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.
This section defines an algorithm for creating an outline for a sectioning content element or a sectioning root element. It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk.
The outline for a sectioning content element
or a sectioning root element consists of a list
of one or more potentially nested sections. Each section can have one
heading associated with it. The algorithm for the outline also associates
each node in the DOM tree with a particular section and potentially a
heading. (The sections in the outline aren't section elements, though some may correspond to
such elements — they are merely conceptual sections.)
The algorithm that must be followed during a walk of a DOM subtree rooted at a sectioning content element or a sectioning root element to determine that element's outline is as follows:
Let current outlinee be null. (It holds the element whose outline is being created.)
Let current section be null. (It holds a pointer to a section, so that elements in the DOM can all be associated with a section.)
Create a stack to hold elements, which is used to handle nesting. Initialise this stack to empty.
As you walk over the DOM in tree order, trigger the first relevant step below for each element as you enter and exit it.
The element being exited is a heading content element.
Pop that element from the stack.
Do nothing.
If current outlinee is not null, push current outlinee onto the stack.
Let current outlinee be the element that is being entered.
Let current section be a newly created section for the current outlinee element.
Let there be a new outline for the new current outlinee, initialised with just the new current section as the only section in the outline.
Pop the top element from the stack, and let the current outlinee be that element.
Let current section be the last section in the outline of the current outlinee element.
Append the outline of the sectioning content element being exited to the current section. (This does not change which section is the last section in the outline.)
Run these steps:
Pop the top element from the stack, and let the current outlinee be that element.
Let current section be the last section in the outline of the current outlinee element.
Loop: If current section has no child sections, stop these steps.
Let current section be the last child section of the current current section.
Go back to the substep labelled Loop.
The current outlinee is the element being exited.
Let current section be the first section in the outline of the current outlinee element.
Skip to the next step in the overall set of steps. (The walk is over.)
Do nothing.
If the current section has no heading, let the element being entered be the heading for the current section.
Otherwise, if the element being entered has a rank equal to or greater than the heading of the current section, then create a new section and append it to the outline of the current outlinee element, so that this new section is the new last section of that outline. Let current section be that new section. Let the element being entered be the new heading for the current section.
Otherwise, run these substeps:
Let candidate section be current section.
If the element being entered has a rank lower than the rank of the heading of the candidate section, then create a new section, and append it to candidate section. (This does not change which section is the last section in the outline.) Let current section be this new section. Let the element being entered be the new heading for the current section. Abort these substeps.
Let candidate section be the section that contains the previous candidate section in the outline of current outlinee.
Return to step 2.
Push the element being entered onto the stack. (This causes the algorithm to skip any descendants of the element.)
Do nothing.
In addition, whenever you exit a node, after doing the steps above, if current section is not null, associate the node with the section current section.
If the current outlinee is null, then there was no sectioning content element or sectioning root element in the DOM. There is no outline. Abort these steps.
Associate any nodes that were not associated a section in the steps above with current outlinee as their section.
Associate all nodes with the heading of the section which which they are associated, if any.
If current outlinee is the
body element, then the outline created for that element
is the outline of the entire document.
The tree of sections created by the algorithm above, or a proper subset thereof, must be used when generating document outlines, for example when generating tables of contents.
When creating an interactive table of contents, entries should jump the user to the relevant sectioning content element, if the section was created for a real element in the original document, or to the relevant heading content element, if the section in the tree was generated for a heading in 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 following JavaScript function shows how the tree walk could be implemented. The root argument is the root of the tree to walk, and the enter and exit arguments are callbacks that are called with the nodes as they are entered and exited. [ECMA262]
function (root, enter, exit) {
var node = root;
start: do while (node) {
enter(node);
if (node.firstChild) {
node = node.firstChild;
continue start;
}
while (node) {
exit(node);
if (node.nextSibling) {
node = node.nextSibling;
continue start;
}
if (node == root)
node = null;
else
node = node.parentNode;
}
}
}
Given the outline of a document, but ignoring any
sections created for nav and aside elements, and any of their descendants, if
the only 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 heading of the body element
should be assumed to be a site-wide heading, and the heading of the
article element should be assumed to
be the page's heading.
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 outline, ignoring any sections created for nav and aside
elements and any of their descendants, the tree has only one root section,
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 heading 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 outline,
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, or there is more than one
section at the root of the outline.
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.