Sections

The `body` element

Contexts in which this element can be used:

As the second element in an <{html}> element.

A <{body}> element's start tag may be omitted if the element is empty, or if the first thing inside the <{body}> element is not a space character or a comment, except if the first thing inside the <{body}> element is a <{meta}>, <{link}>, <{script}>, <{style}>, or <{template}> element.

A <{body}> element's end tag may be omitted if the <{body}> element is not immediately followed by a comment.

Content attributes:

Global attributes

onafterprint

onbeforeprint

onbeforeunload

onhashchange

onlanguagechange

onmessage

onoffline

ononline

onpagehide

onpageshow

onpopstate

onrejectionhandled

onstorage

onunhandledrejection

onunload

[=Allowed ARIA role attribute values=]:

document role (default - do not set).

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the default role.

DOM interface:

        interface HTMLBodyElement : HTMLElement {
        };
        HTMLBodyElement implements WindowEventHandlers;

The <{body}> element represents the content of the document. In conforming documents, there is only one <{body}> element. The document.body IDL 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.

The <{body}> element exposes as event handler content attributes a number of the event handlers of the Window object. It also mirrors their event handler IDL attributes. The onblur, onerror, onfocus, onload, onresize, and onscroll event handlers of the Window object, exposed on the <{body}> element, replace the generic event handlers with the same names normally supported by HTML elements.

Thus, for example, a bubbling error event dispatched on a child of the body element of a {{Document}} would first trigger the onerror event handler content attributes of that element, then that of the root <{html}> element, and only then would it trigger the onerror event handler content attribute on the <{body}> element. This is because the event would bubble from the target, to the <{body}>, to the <{html}>, to the {{Document}}, to the {{Window}}, and the event handler on the <{body}> is watching the Window not the <{body}>. A regular event listener attached to the <{body}> using addEventListener(), however, would be run when the event bubbled through the body and not when it reaches the Window object.

This page updates an indicator to show whether or not the user is online: <!DOCTYPE html> <html> <head> <title>Online or offline?</title> <script> function update(online) { document.getElementById('status').textContent = online ? 'Online' : 'Offline'; } </script> </head> <body ononline="update(true)" onoffline="update(false)" onload="update(navigator.onLine)"> <p>You are: <span id="status">(Unknown)</span></p> </body> </html>

The `article` element

Categories:: Flow content.; Sectioning content.; Palpable content.
Contexts in which this element can be used:: Where flow content is expected.
Content model:: Flow content, but with no <{main}> element descendants.
Tag omission in text/html:: Neither tag is omissible
Content attributes:: Global attributes
[=Allowed ARIA role attribute values=]:: article (default - do not set), application, document, feed, main, none, presentation or region.
[=Allowed ARIA state and property attributes=]:: Global aria-* attributes; Any aria-* attributes applicable to the allowed roles.
DOM interface:: Uses {{HTMLElement}}.

The <{article}> element represents a complete, or self-contained, composition in a document, page, application, or site. This could be a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post. A general rule is that the <{article}> element is appropriate only if the element's contents would be listed explicitly in the document's outline. Each <{article}> should be identified, typically by including a heading(<{h1}>-<{h6}> element) as a child of the <{article}> element.

Assistive Technology may convey the semantics of the <{article}> to users. This information can provide a hint to users as to the type of content. For example the role of the element, which in this case matches the element name "article", can be announced by screen reader software when a user navigates to an <{article}> element. User Agents may also provide methods to navigate to <{article}> elements.

An <{article}> element may contain other nested elements to provide additional semantics to different portions of the article. For instance, an article may consist of a <{header}> that contains the primary heading of the article, with other elements to provide lead-in or meta content about the article prose. Additionally, an article may consist of various subsections that, together, form the complete composition. These subsections may be implied by the use of appropriately ranked headings (<{h1}>-<{h6}> elements), or may be explicitly set by use of a <{section}> element or elements. 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 blog entry on a site could consist of summaries of other blog entries in <{article}> elements nested within the <{article}> element for the blog entry.

The following is an example of a blog post extract, marked up using the <{article}> element:

<article> <header> <h2><a href="https://example.com/short-note/">Short note on wearing shorts</a></h2> <p><a href="https://example.com/short-note/#comments">6 comments</a></p> </header> <p> A fellow traveller posed an interesting question: Why do you wear shorts rather than longs? The short answer is that I enjoy wearing shorts, the long answer is... </p> <p> <a href="https://example.com/short-note/">Continue reading: Short note on wearing shorts</a> </p> </article>

The schema.org vocabulary can be used to provide more granular information about the type of article, using the CreativeWork - Article subtypes, other information such as the publication date for the article can also be provided.

This example shows a blog post using the <{article}> element, with some schema.org annotations: <article vocab="http://schema.org/" typeof="Article"> <header> <h2 property="name">The Very First Rule of Life</h2> <p property="datePublished"><time datetime="2018-02-07">3 days ago</time></p> </header> <div property="articleBody"> <p>Always check that your computer is plugged in before you complain it isn't working.</p> </div> <footer> <a href="?comments=1">Show comments...</a> </footer> </article> Here is that same blog post, but showing some of the comments: <article> <header> <h2>The Very First Rule of Life</h2> <p><time datetime="2018-02-07">3 days ago</time></p> </header> <p>Always check that your computer is plugged in before you complain it isn't working.</p> <section> <h3>Comments</h3> <ol> <li id="c1"> <p>Posted by: <span>George Washington</span> </p> <p><time datetime="2018-02-10">15 minutes ago</time></p> <p>Yeah! I've done that!</p> </li> <li id="c2"> <p>Posted by: <span>George Hammond</span> </p> <p><time datetime="2018-02-10">5 minutes ago</time></p> <p>Hey, you have the same first name as me.</p> </li> </ol> </section> </article>

Notice the use of an ordered list (ol element) to organize the comments. Also note these comments are considered a subsection of the article, identified by the section element they are nested within.

The `section` element

Categories:: Flow content.; Sectioning content.; 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
[=Allowed ARIA role attribute values=]:: region role (default - do not set), alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, presentation, search, status or tabpanel.
[=Allowed ARIA state and property attributes=]:: Global aria-* attributes; Any aria-* attributes applicable to the allowed roles.
DOM interface:: Uses {{HTMLElement}}.
DPub Roles:: doc-abstract, doc-acknowledgments, doc-afterword, doc-appendix, doc-bibliography, doc-chapter, doc-colophon, doc-conclusion, doc-credit, doc-credits, doc-dedication, doc-endnotes, doc-epilogue, doc-errata, doc-example, doc-foreword, doc-index, doc-introduction, doc-notice, doc-pagelist, doc-part, doc-preface, doc-prologue, doc-pullquote, doc-qna or doc-toc

The <{section}> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the <{section}> element.

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, and contact information.

Unlike an <{article}>, a <{section}> may not be fully understandable if taken out of context of its originating document or application. Authors are encouraged to use the <{article}> element instead of the <{section}> element when the content is a complete, or self-contained, composition.

While the <{section}> element represents a generic section of a document or application, it is not a generic container element. When a wrapping element is needed for styling purposes, or as a convenience for scripting, authors are encouraged to use the <{div}> element instead. A general rule is that the <{section}> element is appropriate only if the element's contents would be listed explicitly in the document's outline.

Assistive Technology may convey the semantics of the <{section}> to users when the element has an explicit label. This information can provide a hint to users as to the type of content. For example the role of the element, which in this case is "region", can be announced by screen reader software when a user navigates to an <{section}> element. User Agents may also provide methods to navigate to <{section}> elements.

In the following example, we see an article (part of a larger Web page) about apples, containing two short sections.

The <{section}> has an <{aria/aria-label}> attribute providing a brief description of the contents. Assistive technology may convey the region role along with the <{aria/aria-label}> value as a hint to users.

<article> <header> <h2>Apples</h2> <p>Tasty, delicious fruit!</p> </header> <p>The apple is the pomaceous fruit of the apple tree.</p> <section aria-label="Red apples."> <h3>Red Delicious</h3> <p>These bright red apples are found in many supermarkets.</p> </section> <section aria-label="Green apples."> <h3>Granny Smith</h3> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article>

Here is a graduation program with two sections, one for description of the ceremony, and one for the listing of people graduating. Within the second section there could exist articles, providing brief bios, academic achievements, and personal note from the graduates. <!DOCTYPE html> <html> <head> <title>Graduation Ceremony Summer 2022</title> </head> <body> <h1>Graduation</h1> <section> <h2>Ceremony</h2> <p>Opening Procession</p> <p>Speech by Valedictorian</p> <p>Speech by Class President</p> <p>Presentation of Diplomas</p> <p>Closing Speech by Headmaster</p> </section> <section> <h2>Graduates</h2> <ul> <li>Molly Carpenter</li> <li>Anastasia Luccio</li> <li>Ebenezar McCoy</li> <li>Karrin Murphy</li> <li>Thomas Raith</li> <li>Susan Rodriguez</li> </ul> <article> <h3>About Molly Carpenter</h3> <p> Molly was valedictorian of her class, graduating with a GPA of... </p> </article> ... </section> </body> </html>

In this example, a book author has marked up some sections as chapters and some as appendices, and uses CSS to style the headers in these two classes of section differently. The whole book is wrapped in an <{article}> element as part of an even larger document containing other books. <style> section { border: double medium; margin: 2em; } section.chapter h3 { font: 2em Roboto, Helvetica Neue, sans-serif; } section.appendix h3 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; } </style> ... <article class="book"> <header> <h2>My Book</h2> <p>A sample with not much content</p> <p><small>Published by Example Publishing.</small></p> </header> <section class="chapter"> <h3>My First Chapter</h3> <p>This is the first of my chapters. It doesn't say much.</p> <p>But it has two paragraphs!</p> </section> <section class="chapter"> <h3>It Continues: The Second Chapter</h3> <p>Bla dee bla, dee bla dee bla. Boom.</p> </section> <section class="chapter"> <h3>Chapter Three: A Further Example</h3> <p>It's not like a battle between brightness and earthtones would go unnoticed.</p> <p>But it might ruin my story.</p> </section> <section class="appendix"> <h3>Appendix A: Overview of Examples</h3> <p>These are demonstrations.</p> </section> <section class="appendix"> <h3>Appendix B: Some Closing Remarks</h3> <p>Hopefully this long example shows that you <em>can</em> style sections, so long as they are used to indicate actual sections.</p> </section> </article>

The `nav` element

Categories:: Flow content.; Sectioning content.; Palpable content.
Contexts in which this element can be used:: Where flow content is expected.
Content model:: Flow content, but with no <{main}> element descendants.
Tag omission in text/html:: Neither tag is omissible
Content attributes:: Global attributes
[=Allowed ARIA role attribute values=]:: navigation 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}}.
DPub Roles:: doc-index, doc-pagelist or doc-toc

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.

Assistive Technology may convey the semantics of the <{nav}> to users. This information can provide a hint to users as to the type of content. For example the role of the element, which in this case is "navigation", can be announced by screen reader software when a user navigates to an <{nav}> element. User Agents may also provide methods to navigate to <{nav}> elements.

In cases where the content of a <{nav}> element represents a list of items, use list markup to aid understanding and navigation.

Not all groups of links on a page need to be in a <{nav}> element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The <{footer}> element alone is sufficient for such cases; while a <{nav}> element can be used in such cases, it is usually unnecessary.

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).

In the following example, there are two <{nav}> elements, one for primary navigation around the site, and one for secondary navigation around the page itself. <body> <h1>The Wiki Center Of Exampland</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/events">Current Events</a></li> </ul> </nav> <article> <header> <h2>Demos in Exampland</h2> <p>Written by A. N. Other.</p> </header> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> </ul> </nav> <div> <section id="public"> <h2>Public demonstrations</h2> </section> <section id="destroy"> <h2>Demolitions</h2> </section> </div> <footer> <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p> </footer> </article> <footer> <p><small>© copyright 1998 Exampland Emperor</small></p> </footer> </body>

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 typeof="schema:Blog"> <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> <p>Last Modified: <span property="schema:dateModified">2009-04-01</span></p> <nav> <h2>Navigation</h2> <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> </header> <main> <article property="schema:blogPosts" typeof="schema:BlogPosting"> <header> <h2 property="schema:headline">My Day at the Beach</h2> </header> <section property="schema:articleBody"> <p>Today I went to the beach and had a lot of fun.</p> ... </section> <footer> <p>Posted <time property="schema:datePublished" datetime="2009-10-10">Thursday</time>.</p> </footer> </article> ... </main> <footer> <p>Copyright © <span property="schema:copyrightYear">2010</span> <span property="schema:copyrightHolder">The Example Company</span> </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> Notice the <{main}> element being used to wrap the main content of the page. In this case, all content other than the page header and footer. You can also see microdata annotations in the above example that use the schema.org vocabulary to provide the publication date and other metadata about the blog post.

A <{nav}> element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose: <nav> <h2>Navigation</h2> <p>You are on my home page. To the north lies <a href="/blog">my blog</a>, from whence the sounds of battle can be heard. To the east you can see a large mountain, upon which many <a href="/school">school papers</a> are littered. Far up this mountain you can spy a little figure who appears to be me, desperately scribbling out a <a href="/school/thesis">thesis</a>.</p> <p>To the west are several exits. One fun-looking exit is labeled <a href="https://games.example.com/">"games"</a>. Another more boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.</p> <p>To the south lies a dark and dank <a href="/about">contacts page</a>. Cobwebs cover its disused entrance, and at one point you see a rat run quickly out of the page.</p> </nav>

In this example, <{nav}> is used in an e-mail application, to let the user switch folders: <p><input type="button" value="Compose" onclick="compose()"></p> <nav> <h2>Folders</h2> <ul> <li><a href="/inbox" onclick="return openFolder(this.href)">Inbox</a> <span class="count"></span></li> <li><a href="/sent" onclick="return openFolder(this.href)">Sent</a></li> <li><a href="/drafts" onclick="return openFolder(this.href)">Drafts</a></li> <li><a href="/trash" onclick="return openFolder(this.href)">Trash</a></li> <li><a href="/customers" onclick="return openFolder(this.href)">Customers</a></li> </ul> </nav>

The `aside` element

Categories:: Flow content.; Sectioning content.; Palpable content.
Contexts in which this element can be used:: Where flow content is expected.
Content model:: Flow content, but with no <{main}> element descendants.
Tag omission in text/html:: Neither tag is omissible
Content attributes:: Global attributes
[=Allowed ARIA role attribute values=]:: complementary role (default - do not set), feed, note, presentation, none, region or search
[=Allowed ARIA state and property attributes=]:: Global aria-* attributes; Any aria-* attributes applicable to the allowed roles.
DOM interface:: Uses {{HTMLElement}}.
DPub Roles:: doc-example, doc-footnote, doc-pullquote or doc-tip

The <{aside}> element represents a section of a page that consists of content that is tangentially related to the content of the parenting sectioning content, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of <{nav}> elements, and for other content that is considered separate from the main content of the nearest ancestor sectioning content. Assistive Technology may convey the semantics of the <{aside}> to users. This information can provide a hint to users as to the type of content. For example the role of the element, which in this case is "complementary", can be announced by screen reader software when a user navigates to an <{aside}> element. User Agents may also provide methods to navigate to <{aside}> elements.

It's not appropriate to use the <{aside}> element just for parentheticals, since those are part of the main flow of the document.

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> <h2>Switzerland</h2> <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>She later joined a large company, continuing on the same work.</p> <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 her work — or should that be hobby? — isn't her only passion. She also enjoys other pleasures.</p> ...

The following extract shows how <{aside}> can be used for blogrolls and other side content on a blog: <body> <header> <h1>My wonderful blog</h1> </header> <aside>  <nav> <h2>My blogroll</h2> <ul> <li><a href="https://blog.example.com/">Example Blog</a></li> </ul> </nav> <nav> <h2>Archives</h2> <ol> <li><a href="/last-post">My last post</a></li> <li><a href="/first-post">My first post</a></li> </ol> </nav> </aside> <aside>  <h2>Twitter Feed</h2> <blockquote cite="https://twitter.example.net/t31351234"> I'm on vacation, writing my blog. </blockquote> <blockquote cite="https://twitter.example.net/t31219752"> I'm going to go on vacation soon. </blockquote> </aside> <article>  <h2>My last post</h2> <p>This is my last post.</p> <footer> <p><a href="/last-post" rel="bookmark">Permalink</a></p> </footer> </article> <article>  <h2>My first post</h2> <p>This is my first post.</p> <aside>  <h1>Posting</h1> <p>While I'm thinking about it, I wanted to say something about posting. Posting is fun!</p> </aside> <footer> <p><a href="/first-post" rel="bookmark">Permalink</a></p> </footer> </article> <footer> <nav> <a href="/archives">Archives</a> — <a href="/about">About me</a> — <a href="/copyright">Copyright</a> </nav> </footer> </body>

The `h1`, `h2`, `h3`, `h4`, `h5`, and `h6` elements

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=]:

heading role (default - do not set), none, presentation or tab

[=Allowed ARIA state and property attributes=]:

Global aria-* attributes

Any aria-* attributes applicable to the allowed roles.

DOM interface:

        interface HTMLHeadingElement : HTMLElement {};

DPub Roles:

doc-subtitle

These elements represent headings for their sections. These elements have a rank given by the number in their name. The h1 element has the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank. Use the rank of heading elements to create the document outline.

The following code shows how to mark up a document outline with six levels of headings. <body> <h1>top level heading</h1> <section> <h2>2nd level heading</h2> <section> <h3>3nd level heading</h3> <section> <h4>4th level heading</h4> <section> <h5>5th level heading</h5> <section> <h6>6th level heading</h6> </section> </section> </section> </section> </section> </body>

The document outline would be the same if the <{section}> elements were not used.

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the [[#common-idioms-without-dedicated-elements]] section of the specification. Assistive technology often announces the presence and level of a heading to users, as a hint to understand the structure of a document and construct a 'mental model' of its outline. For example the role of the element, which in this case is "heading" and the heading level "1" to "6", can be announced by screen reader software when a user navigates to an h1–h6 element. User Agents may also provide methods to navigate to h1–h6 elements.

As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent: <body> <h1>Let's call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> <h2>Canvas coordinates</h2> <h3>Canvas coordinates diagram</h3> <h2>Paths</h2> </body> <body> <h1>Let's call it a draw(ing surface)</h1> <section> <h2>Diving in</h2> </section> <section> <h2>Simple shapes</h2> </section> <section> <h2>Canvas coordinates</h2> <section> <h3>Canvas coordinates diagram</h3> </section> </section> <section> <h2>Paths</h2> </section> </body> Authors might prefer the former style for its terseness, or the latter style for its convenience in the face of heavy editing; which is best is purely an issue of preferred authoring style. The two styles can be combined, for compatibility with legacy tools while still future-proofing for when that compatibility is no longer needed.

The semantics and meaning of the h1–h6 elements are further detailed in the section on [[#headings-and-sections]].

The `header` 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 <{main}> element descendants, or <{header}>, <{footer}> elements that are not descendants of sectioning content which is a descendant of the <{header}>.
Tag omission in text/html:: Neither tag is omissible
Content attributes:: Global attributes
[=Allowed ARIA role attribute values=]:: banner role (default - do not set), group, none or presentation
[=Allowed ARIA state and property attributes=]:: Global aria-* attributes; Any aria-* attributes applicable to the allowed roles.
DOM interface:: Uses {{HTMLElement}}.
DPub Roles:: doc-footnote

The <{header}> element represents introductory content for its nearest ancestor <{main}> element, sectioning content, or sectioning root element. A <{header}> typically contains a group of introductory or navigational aids. When a <{header}> element's nearest ancestor sectioning root element is the <{body}> element, and it is not a descendant of the <{main}> element or a sectioning content element, then that <{header}> is scoped to the <{body}> element and represents mostly site-oriented content, or introductory content for the page as a whole. Assistive Technology may convey to users the semantics of the <{header}> element when it applies to the whole page. This information can provide a hint as to the type of content. For example, the <{aria/role}> of the element, which in this case is "banner", can be announced by screen reader software when a user navigates to a <{header}> element that is scoped to the <{body}> element. User Agents may also provide methods to navigate to a <{header}> element scoped to the <{body}> element.

A <{header}> element is intended to usually contain the section's heading (an h1–h6 element), but this is not required. The <{header}> element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

The following snippet shows how the element can be used to mark up a specification's header: <header> <h1>Scalable Vector Graphics (SVG) 1.2</h1> <p>W3C Working Draft 27 October 2004</p> <dl> <dt>This version:</dt> <dd><a href="https://www.w3.org/TR/2004/WD-SVG12-20041027/">https://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd> </dl> </header> The following snippet shows how one might use headers within a blog. The first header provides introductory content for the page as a whole, and is scoped to the <{body}> element. The second provides introductory content to the primary article of the page: <body> <header> <nav> <a href="/">My Awesome blog</a> <ul> <li><a href="/new-articles">Latest</a></li> <li><a href="/old-articles">Archive</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> </header> <main> <article> <header> <h1> My great post! </h1> <p>Hello world!</p> </header> </article> </main> </body> The next example shows a misuse of a <{header}>, as its content does not represent an introduction to its parent sectioning content: <article> <h2>Spinning Straw into Gold</h2> <p>A primer on getting rich quick, while avoiding making horrible promises.</p> ... <header> <h3>Make a point to learn obscure names</h3> </header> ... </article> Modifying the previous example, the following markup better aligns to the appropriate usage for a <{header}>. Now the content that appropriately introduces the <{article}> is wrapped within a <{header}>, and the content that was previously in a header is now appropriately scoped to a subsection of the article:

      <article>
        <header>
          <h2>Spinning Straw into Gold</h2>
          <p>A primer on getting rich quick, while avoiding making horrible promises.</p>
        </header>
        This text will guide you through the necessary steps to complete this impossible task...

        <section>
          <header>
            <h3>Make a point to learn obscure names</h3>
          </header>
          
If you are tasked with guessing someone's name, then it should be safe to assume that common names won't get you far...
        </section>
      </article>

The <{header}> element is not sectioning content; it doesn't introduce a new section, though headings within a header will indicate new sections to the page.

In this example, the page has a page heading given by the <{h1}> element, and two subsections whose headings are given by <{h2}> elements. The content after the <{header}> element is still part of the last subsection started in the <{header}> element, because the <{header}> element doesn't take part in the outline algorithm. <body> <header> <h1>Little Green Guys With Guns</h1> <nav> <ul> <li><a href="/games">Games</a></li> <li><a href="/forum">Forum</a></li> <li><a href="/download">Download</a></li> </ul> </nav> <h2>Important News</h2>   <p>To play today's games you will need to update your client.</p> <h2>Games</h2>  </header> <p>You have three active games:</p>  ...

For cases where a developer wants to nest a header or footer within another header: The <{header}> element can only contain a <{header}> or <{footer}> if they are themselves contained within sectioning content.

In this example, the <{article}> has a <{header}> which contains an <{aside}> which itself contains a header. This is conforming as the descendant header is contained within the aside element.

<article> <header> <h1>Flexbox: The definitive guide</h1> <aside> <header> <h2>About the author: Wes McSilly</h2> <p><a href="./wes-mcsilly/">Contact him! (Why would you?)</a></p> </header> <p>Expert in nothing but Flexbox. Talented circus sideshow.</p> </aside> </header> <p><ins>The guide about Flexbox was supposed to be here, but it turned out Wes wasn't a Flexbox expert either.</ins></p> </article>

: [=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 <{main}> element descendants, or <{header}>, <{footer}> elements that are not descendants of [=sectioning content=] which is a descendant of the <{footer}>. : Tag omission in text/html: :: Neither tag is omissible : [=Content attributes=]: :: [=Global attributes=] : [=Allowed ARIA role attribute values=]: :: contentinfo role (default - do not set), group, none or presentation. : [=Allowed ARIA state and property attributes=]: :: [=Global aria-* attributes=] :: Any <{aria/aria-*}> attributes [[#allowed-aria-roles-states-and-properties|applicable to the allowed roles]]. : [=DOM interface=]: :: Uses {{HTMLElement}}. : DPub Roles: :: doc-footnote The <{footer}> element represents a footer for its nearest ancestor <{main}> element or sectioning content or sectioning root element. A footer typically contains information about its section, such as who wrote it, links to related documents, copyright data, and the like. A <{footer}> element can also contain entire sections representing appendices, indexes, long colophons, verbose license agreements, and other such content. When a <{footer}> element's nearest ancestor sectioning root element is the <{body}> element, and it is not a descendant of the <{main}> element or a sectioning content element, then that <{footer}> is scoped to the <{body}> element and represents a footer for the page as a whole. Assistive Technology may convey to users the semantics of the <{footer}> element when it applies to the whole page. This information can provide a hint as to the type of content. For example, the <{aria/role}> of the element, which in this case is "content information", can be announced by screen reader software when a user navigates to a <{footer}> element that is scoped to the <{body}> element. User Agents may also provide methods to navigate to a <{footer}> element scoped to the <{body}> element.

Contact information for the author or editor of a section belongs in an <{address}> element, possibly itself inside a <{footer}>. Bylines and other information that could be suitable for both a <{header}> or a <{footer}> can be placed in either (or neither).

Footers don't necessarily have to appear at the end of a section, though they usually do.

The <{footer}> element is not sectioning content; it doesn't introduce a new section.

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> <div> <h1>Example Page</h1> <p>This is an example</p> </div> <p>Some text explaining the example...</p> <footer><a href="../">Back to index...</a></footer> </body>

Here is an example which shows the <{footer}> element being used both for a site-wide footer and for a section footer. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The Ramblings of a Scientist</title> </head> <body> <h1>The Ramblings of a Scientist</h1> <main> <article> <h2>Episode 15</h2> <video src="/fm/015.ogv" controls preload> <p><a href="/fm/015.ogv">Download video</a>.</p> </video> <footer>  <p>Published <time datetime="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</time></p> </footer> </article> <article> <h2>My Favorite Trains</h2> <p>I love my trains. My favorite train of all time is a Köf.</p> <p>It is fun to see them pull some coal cars because they look so dwarfed in comparison.</p> <footer>  <p>Published <time datetime="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</time></p> </footer> </article> </main> <footer>  <nav> <p> <a href="/credits.html">Credits</a> — <a href="/tos.html">Terms of Service</a> — <a href="/index.html">Blog Index</a> </p> </nav> <p>© 2009 Gordon Freeman</p> </footer> </body> </html>

Some site designs have what is sometimes referred to as "fat footers" — footers that contain a lot of material, including images, links to other articles, links to pages for sending feedback, special offers... in some ways, a whole "front page" in the footer. This fragment shows the bottom of a page on a site with a "fat footer": ... <footer> <section> <h2>Articles</h2> <p> <img src="images/somersaults.jpeg" alt> Go to the gym with our somersaults class! Our teacher Jim takes you through the paces in this two-part article. <a href="articles/somersaults/1">Somersaults: Part 1</a>· <a href="articles/somersaults/2">Somersaults: Part 2</a>. </p> <p> <img src="images/kindplus.jpeg" alt> Tired of walking on the edge of a clif? Our guest writer Lara shows you how to bumble your way through the bars. <a href="articles/kindplus/1">Read more...</a> </p> <p> <img src="images/crisps.jpeg" alt> The chips are down, now all that's left is a potato. What can you do with it? <a href="articles/crisps/1">Read more...</a> </p> </section> <nav> <ul> <li><a href="/about">About us...</a></li> <li><a href="/feedback">Send feedback!</a></li> <li><a href="/sitemap">Sitemap</a></li> </ul> </nav> <p> <small>© 2018 — <a href="/tos">Terms of Service</a></small> </p> </footer> </body>

Headings and sections

The h1–h6 elements are headings. The first element of heading content in an element of sectioning content represents the heading for that explicit section. Subsequent headings of equal or higher rank start new implied subsections that are part of the previous section's parent section. Subsequent headings of lower rank start new implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section. h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the [[#common-idioms-without-dedicated-elements]] section of the specification. Certain elements are said to be sectioning roots, including blockquote and <{td}> elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors. Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created.

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, containing the "Grunt" paragraph) 1. Bar (heading starting implied section, containing a block quote and the "Baz" paragraph) 2. Quux (heading starting implied section with no content other than the heading itself) 3. Thud (heading of explicit 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 headings of a rank equal to their section nesting level. Authors should use headings of the appropriate rank for the section's nesting level. Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

For example, the following is correct: <body> <h1>Apples</h1> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <h3>Sweet</h3> <p>Red apples are sweeter than green ones.</p> <h3>Color</h3> <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> <h3>Color</h3> <p>Apples come in various colors.</p> </section> </section> </body> Both of the documents above are semantically identical and would produce the same outline in compliant user agents.

Creating an outline

There are currently no known native implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers and browser extensions. Additionally, there is an alternate outline algorithm proposal being developed, as well as proposals to modify the existing algorithm (See W3C HTML issue #1005 and W3C HTML issue #830). Any implementation and usage of these different proposals will be tracked, and may result in significant future changes to the outline algorithm. Therefore, the outline algorithm cannot be relied upon to convey document structure to users. Authors should use heading rank (h1-h6) to convey document structure.

This section is non-normative

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. Each time a node is visited, it can be seen as triggering an enter or exit event.

The following pseudocode fragment:

        visitNode(node)
          onEnter(node)
          child = node.firstChild
          while(child != null)
            visitNode(child)
            child = child.nextSibling
          onExit(node)

...exemplifies how to recursively traverse the node tree and when to trigger the enter and exit events. See the JavaScript example for a possible, non-recursive JavaScript implementation.

The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections. The element for which an outline is created is said to be the outline's owner. A section is a container that corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested subsections. 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 following markup fragment: <body> <h1>A</h1> <p>B</p> <h2>C</h2> <p>D</p> <h2>E</h2> <p>F</p> </body> ...results in the following outline being created for the body node (and thus the entire document): 1. Section created for body node. Associated with heading "A". Also associated with paragraph "B". Nested sections: 1. Section implied for first h2 element. Associated with heading "C". Also associated with paragraph "D". No nested sections. 2. Section implied for second h2 element. Associated with heading "E". Also associated with paragraph "F". No nested 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: 1. Let current outline owner be null. (It holds the element whose outline is being created.) 2. 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.) 3. Create a stack to hold elements, which is used to handle nesting. Initialize this stack to empty. 4. Walk over the DOM in tree order, starting with the sectioning content element or sectioning root element at the root of the subtree for which an outline is to be created, and trigger the first relevant step below for each element as the walk enters and exits it.

When exiting an element, if that element is the element at the top of the stack: The element being exited is a heading content element or an element with a <{global/hidden}> attribute.
Pop that element from the stack.
If the top of the stack is a heading content element or an element with a <{global/hidden}> attribute: Do nothing.
When entering an element with a <{global/hidden}> attribute: Push the element being entered onto the stack. (This causes the algorithm to skip that element and any descendants of the element.)
When entering a sectioning content element: Run these steps: 1. If current outline owner is not null, run these substeps: 1. If the current section has no heading, create an implied heading and let that be the heading for the current section. 2. Push current outline owner onto the stack. 2. Let current outline owner be the element that is being entered. 3. Let current section be a newly created section for the current outline owner element. 4. Associate current outline owner with current section. 5. Let there be a new outline for the new current outline owner, initialized with just the new current section as the only section in the outline.
When exiting a sectioning content element, if the stack is not empty: Run these steps: 1. If the current section has no heading, create an implied heading and let that be the heading for the current section. 2. Pop the top element from the stack, and let the current outline owner be that element. 3. Let current section be the last section in the outline of the current outline owner element. 4. 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.)
When entering a sectioning root element: Run these steps: 1. If current outline owner is not null, push current outline owner onto the stack. 2. Let current outline owner be the element that is being entered. 3. Let current outline owner's parent section be current section. 4. Let current section be a newly created section for the current outline owner element. 5. Let there be a new outline for the new current outline owner, initialized with just the new current section as the only section in the outline.
When exiting a sectioning root element, if the stack is not empty: Run these steps: 1. If the current section has no heading, create an implied heading and let that be the heading for the current section. 2. Let current section be current outline owner's parent section. 3. Pop the top element from the stack, and let the current outline owner be that element.
When exiting a sectioning content element or a sectioning root element (when the stack is empty): The current outline owner is the element being exited, and it is the sectioning content element or a sectioning root element at the root of the subtree for which an outline is being generated.
If the current section has no heading, create an implied heading and let that be the heading for the current section. Skip to the next step in the overall set of steps. (The walk is over.)
When entering a heading content element: If the current section has no heading, let the element being entered be the heading for the current section. Otherwise, if the heading of the last section of the outline of the current outline owner is an implied heading, or if the heading being entered has a rank equal to or higher than the heading of the last section of the outline of the current outline owner, then create a new section and append it to the outline of the current outline owner 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: 1. Let candidate section be current section. 2. Heading loop: 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. 3. Let new candidate section be the section that contains candidate section in the outline of current outline owner. 4. Let candidate section be new candidate section. 5. Return to the step labeled heading loop. Push the element being entered onto the stack. (This causes the algorithm to skip any descendants of the element.)
Recall that h1 has the highest rank, and h6 has the lowest rank.
Otherwise: Do nothing.

In addition, whenever the walk exits a node, after doing the steps above, if the node is not associated with a section yet, associate the node with the section current section. 5. Associate all non-element nodes that are in the subtree for which an outline is being created with the section with which their parent element is associated. 6. Associate all nodes in the subtree with the heading of the section with which they are associated, if any. 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. The outline created for the body element of a {{Document}} is the outline of the entire document. 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 heading in the body is to be found.

The outline depth of a heading content element associated with a section section is the number of sections that are ancestors of section in the outermost outline that section finds itself in when the outlines of its {{Document}}'s elements are created, plus 1. The outline depth of a heading content element not associated with a section is 1. User agents should provide default headings for sections that do not have explicit section headings.

Consider the following snippet: <body> <nav> <p><a href="/">Home</a></p> </nav> <p>Hello world.</p> <aside> <p>My cat is cute.</p> </aside> </body> Although it contains no headings, this snippet has three sections: a document (the <{body}>) with two subsections (a <{nav}> and an <{aside}>). A user agent could present the outline as follows: 1. Untitled document 1. Navigation 2. Sidebar These default headings ("Untitled document", "Navigation", "Sidebar") are not specified by this specification, and might vary with the user's language, the page's language, the user's preferences, the user agent implementor's preferences, etc.

The following JavaScript function shows how the tree walk could be implemented. The root argument is the root of the tree to walk (either a sectioning content element or a sectioning root element), and the enter and exit arguments are callbacks that are called with the nodes as they are entered and exited. [[!ECMA-262]]

        function (root, enter, exit) {
          var node = root;
          start: while (node) {
            enter(node);
            if (node.firstChild) {
              node = node.firstChild;
              continue start;
            }
            while (node) {
              exit(node);
              if (node == root) {
                node = null;
              } else if (node.nextSibling) {
                node = node.nextSibling;
                continue start;
              } else {
                node = node.parentNode;
              }
            }
          }
        }

Usage summary

This section is non-normative.

Element	Purpose
Element	Example
<{body}>
<{body}>
<{article}>
<{article}>
<{section}>
<{section}>
<{nav}>
<{nav}>
<{aside}>
<{aside}>
<{h1}>–`h6`	A section heading
<{h1}>–`h6`
<{header}>
<{header}>
<{footer}>
<{footer}>

Article or section?

This section is non-normative. A <{section}> forms part of something else. An <{article}> is its own thing. But how does one know which is which? Mostly the real answer is "it depends on author intent". For example, one could imagine a book with a "Granny Smith" chapter that just said "These juicy, green apples make a great filling for apple pies."; that would be a <{section}> because there'd be lots of other chapters on (maybe) other kinds of apples. On the other hand, one could imagine a tweet or tumblr post or newspaper classified ad that just said "Granny Smith. These juicy, green apples make a great filling for apple pies."; it would then be <{article}>s because that was the whole thing. Comments on an article are not part of the <{article}> on which they are commenting, but are related, therefore may be contained in their own nested <{article}>.

Sections

The body element

The article element

The section element

The nav element

The aside element

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

The header element

The footer element