HTML Standard (original) (raw)

Living Standard — Last Updated 15 November 2024

← 4 The elements of HTML — Table of Contents — 4.4 Grouping content →

1. 1. 4.3 Sections
      1. 4.3.1 The body element
      2. 4.3.2 The article element
      3. 4.3.3 The section element
      4. 4.3.4 The nav element
      5. 4.3.5 The aside element
      6. 4.3.6 The h1, h2, h3, h4, h5, and h6 elements
      7. 4.3.7 The hgroup element
      8. 4.3.8 The header element
      9. 4.3.9 The footer element
      10. 4.3.10 The address element
      11. 4.3.11 Headings and outlines
          1. 4.3.11.1 Sample outlines
          2. 4.3.11.2 Exposing outlines to users
      12. 4.3.12 Usage summary
          1. 4.3.12.1 Article or section?

4.3 Sections

4.3.1 The body element

Element/body

Support in all current engines.

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLBodyElement

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer4+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Categories:

None.

Contexts in which this element can be used:

As the second element in an [html](semantics.html#the-html-element) element.

Content model:

Flow content.

Tag omission in text/html:

A [body](#the-body-element) element's start tag can be omitted if the element is empty, or if the first thing inside the [body](#the-body-element) element is notASCII whitespace or a comment, except if the first thing inside the [body](#the-body-element) element is a [meta](semantics.html#the-meta-element), [noscript](scripting.html#the-noscript-element),[link](semantics.html#the-link-element), [script](scripting.html#the-script-element), [style](semantics.html#the-style-element), or [template](scripting.html#the-template-element) element.

A [body](#the-body-element) element's end tag can be omitted if the[body](#the-body-element) element is not immediately followed by a comment.

Content attributes:

Global attributes

[onafterprint](webappapis.html#handler-window-onafterprint)

[onbeforeprint](webappapis.html#handler-window-onbeforeprint)

[onbeforeunload](webappapis.html#handler-window-onbeforeunload)

[onhashchange](webappapis.html#handler-window-onhashchange)

[onlanguagechange](webappapis.html#handler-window-onlanguagechange)

[onmessage](webappapis.html#handler-window-onmessage)

[onmessageerror](webappapis.html#handler-window-onmessageerror)

[onoffline](webappapis.html#handler-window-onoffline)

[ononline](webappapis.html#handler-window-ononline)

[onpageswap](webappapis.html#handler-window-onpageswap)

[onpagehide](webappapis.html#handler-window-onpagehide)

[onpagereveal](webappapis.html#handler-window-onpagereveal)

[onpageshow](webappapis.html#handler-window-onpageshow)

[onpopstate](webappapis.html#handler-window-onpopstate)

[onrejectionhandled](webappapis.html#handler-window-onrejectionhandled)

[onstorage](webappapis.html#handler-window-onstorage)

[onunhandledrejection](webappapis.html#handler-window-onunhandledrejection)

[onunload](webappapis.html#handler-window-onunload)

Accessibility considerations:

For authors.

For implementers.

DOM interface:

[Exposed=Window]
interface HTMLBodyElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

HTMLBodyElement includes WindowEventHandlers;

The [body](#the-body-element) element represents the contents of the document.

In conforming documents, there is only one [body](#the-body-element) element. The [document.body](dom.html#dom-document-body) IDL attribute provides scripts with easy access to a document's [body](#the-body-element) 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](#the-body-element) element.

The [body](#the-body-element) element exposes as event handler content attributes a number of the event handlers of the [Window](nav-history-apis.html#window) object. It also mirrors theirevent handler IDL attributes.

The event handlers of the [Window](nav-history-apis.html#window) object named by theWindow-reflecting body element event handler set, exposed on the[body](#the-body-element) element, replace the generic event handlers with the same names normally supported by HTML elements.

Thus, for example, a bubbling [error](indices.html#event-error) event dispatched on a child of the body element of a [Document](dom.html#document) would first trigger the [onerror](webappapis.html#handler-onerror) event handler content attributes of that element, then that of the root [html](semantics.html#the-html-element) element, and only_then_ would it trigger the [onerror](webappapis.html#handler-onerror) event handler content attribute on the[body](#the-body-element) element. This is because the event would bubble from the target, to the[body](#the-body-element), to the [html](semantics.html#the-html-element), to the [Document](dom.html#document), to the[Window](nav-history-apis.html#window), and the event handler on the[body](#the-body-element) is watching the [Window](nav-history-apis.html#window) not the [body](#the-body-element). A regular event listener attached to the [body](#the-body-element) using addEventListener(), however, would be run when the event bubbled through the [body](#the-body-element) and not when it reaches the [Window](nav-history-apis.html#window) object.

This page updates an indicator to show whether or not the user is online:

<!DOCTYPE HTML>
<html lang="en">
 <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>

4.3.2 The article element

Element/article

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

Categories:

Flow content.

Sectioning content.

Palpable content.

Contexts in which this element can be used:

Where sectioning content is expected.

Content model:

Flow content.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOM interface:

Uses [HTMLElement](dom.html#htmlelement).

The [article](#the-article-element) element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

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

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

When used specifically with content to be redistributed in syndication, the[article](#the-article-element) element is similar in purpose to the entry element in Atom. [ATOM]

The schema.org microdata vocabulary can be used to provide the publication date for an [article](#the-article-element) element, using one of the CreativeWork subtypes.

When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, that content may be marked with an[article](#the-article-element), but it is technically redundant in that case (since it's self-evident that the page is a single composition, as it is a single document).

This example shows a blog post using the [article](#the-article-element) element, with some schema.org annotations:

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>

Here is that same blog post, but showing some of the comments:

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c1">
   <link itemprop="url" href="#c1">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Washington</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">15 minutes ago</time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c2">
   <link itemprop="url" href="#c2">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Hammond</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">5 minutes ago</time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

Notice the use of [footer](#the-footer-element) to give the information for each comment (such as who wrote it and when): the [footer](#the-footer-element) element can appear at the start of its section when appropriate, such as in this case. (Using [header](#the-header-element) in this case wouldn't be wrong either; it's mostly a matter of authoring preference.)

In this example, [article](#the-article-element) elements are used to host widgets on a portal page. The widgets are implemented as customized built-in elements in order to get specific styling and scripted behavior.

<!DOCTYPE HTML>
<html lang=en>
<title>eHome Portal</title>
<script src="/scripts/widgets.js"></script>
<link rel=stylesheet href="/styles/main.css">
<article is="stock-widget">
 <h2>Stocks</h2>
 <table>
  <thead> <tr> <th> Stock <th> Value <th> Delta
  <tbody> <template> <tr> <td> <td> <td> </template>
 </table>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>
<article is="news-widget">
 <h2>News</h2>
 <ul>
  <template>
   <li>
    <p><img> <strong></strong>
    <p>
  </template>
 </ul>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>

4.3.3 The section element

Element/section

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

Categories:

Flow content.

Sectioning content.

Palpable content.

Contexts in which this element can be used:

Where sectioning content is expected.

Content model:

Flow content.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOM interface:

Uses [HTMLElement](dom.html#htmlelement).

The [section](#the-section-element) element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

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.

Authors are encouraged to use the [article](#the-article-element) element instead of the[section](#the-section-element) element when it would make sense to syndicate the contents of the element.

The [section](#the-section-element) element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the [div](grouping-content.html#the-div-element) element instead. A general rule is that the [section](#the-section-element) element is appropriate only if the element's contents would be listed explicitly in the document's outline.

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

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

Here is a graduation programme with two sections, one for the list of people graduating, and one for the description of the ceremony. (The markup in this example features an uncommon style sometimes used to minimize the amount of inter-element whitespace.)

<!DOCTYPE Html>
<Html Lang=En
 ><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
   ></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.

<style>
 section { border: double medium; margin: 2em; }
 section.chapter h2 { font: 2em Roboto, Helvetica Neue, sans-serif; }
 section.appendix h2 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
</style>
<header>
 <hgroup>
  <h1>My Book</h1>
  <p>A sample with not much content</p>
 </hgroup>
 <p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section class="chapter">
 <h2>My First Chapter</h2>
 <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">
 <h2>It Continues: The Second Chapter</h2>
 <p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section class="chapter">
 <h2>Chapter Three: A Further Example</h2>
 <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">
 <h2>Appendix A: Overview of Examples</h2>
 <p>These are demonstrations.</p>
</section>
<section class="appendix">
 <h2>Appendix B: Some Closing Remarks</h2>
 <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>

4.3.4 The nav element

Element/nav

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

Categories:

Flow content.

Sectioning content.

Palpable content.

Contexts in which this element can be used:

Where sectioning content is expected.

Content model:

Flow content.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOM interface:

Uses [HTMLElement](dom.html#htmlelement).

The [nav](#the-nav-element) 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](#the-nav-element) 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 element alone is sufficient for such cases; while a [nav](#the-nav-element) 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](#the-nav-element) 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>
   ...more...
  </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>
    ...more...
   </ul>
  </nav>
  <div>
   <section id="public">
    <h2>Public demonstrations</h2>
    <p>...more...</p>
   </section>
   <section id="destroy">
    <h2>Demolitions</h2>
    <p>...more...</p>
   </section>
   ...more...
  </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 itemscope itemtype="http://schema.org/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 itemprop="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 itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h2 itemprop="headline">My Day at the Beach</h2>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="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>

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](#the-nav-element) 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>
 <h1>Navigation</h1>
 <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 thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling 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](#the-nav-element) is used in an email application, to let the user switch folders:

<p><input type=button value="Compose" onclick="compose()"></p>
<nav>
 <h1>Folders</h1>
 <ul>
  <li> <a href="/inbox" onclick="return openFolder(this.href)">Inbox</a> <span class=count></span>
  <li> <a href="/sent" onclick="return openFolder(this.href)">Sent</a>
  <li> <a href="/drafts" onclick="return openFolder(this.href)">Drafts</a>
  <li> <a href="/trash" onclick="return openFolder(this.href)">Trash</a>
  <li> <a href="/customers" onclick="return openFolder(this.href)">Customers</a>
 </ul>
</nav>

4.3.5 The aside element

Element/aside

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

Categories:

Flow content.

Sectioning content.

Palpable content.

Contexts in which this element can be used:

Where sectioning content is expected.

Content model:

Flow content.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOM interface:

Uses [HTMLElement](dom.html#htmlelement).

The [aside](#the-aside-element) element represents a section of a page that consists of content that is tangentially related to the content around the [aside](#the-aside-element) element, 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](#the-nav-element) elements, and for other content that is considered separate from the main content of the page.

It's not appropriate to use the [aside](#the-aside-element) 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>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>

...

The following extract shows how [aside](#the-aside-element) can be used for blogrolls and other side content on a blog:

<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h2>My blogroll</h2>
   <ul>
    <li><a href="https://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h2>Archives</h2>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <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>
  <!-- this is a blog post -->
  <h2>My last post</h2>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h2>My first post</h2>
  <p>This is my first post.</p>
  <aside>
   <!-- this aside is about the blog post, since it's inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole -->
   <h2>Posting</h2>
   <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>
  </footer>
 </article>
 <footer>
  <p><a href="/archives">Archives</a> -
   <a href="/about">About me</a> -
   <a href="/copyright">Copyright</a></p>
 </footer>
</body>

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

Element/Heading_Elements

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLHeadingElement

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Categories:

Flow content.

Heading content.

Palpable content.

Contexts in which this element can be used:

As a child of an [hgroup](#the-hgroup-element) element.

Where heading content is expected.

Content model:

Phrasing content.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOM interface:

[Exposed=Window]
interface HTMLHeadingElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

These elements represent headings for their sections.

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

These elements have a heading level given by the number in their name. Theheading level corresponds to the levels of nested sections. The [h1](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) element is for a top-level section, [h2](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) for a subsection, [h3](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) for a sub-subsection, and so on.

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 additional styling hooks. Which is best is purely an issue of preferred authoring style.

4.3.7 The hgroup element

Element/hgroup

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android2.2+Samsung Internet?Opera Android11.1+

Categories:

Flow content.

Heading content.

Palpable content.

Contexts in which this element can be used:

Where heading content is expected.

Content model:

Zero or more [p](grouping-content.html#the-p-element) elements, followed by one [h1](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements), [h2](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements),[h3](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements), [h4](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements), [h5](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements), or [h6](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) element, followed by zero or more [p](grouping-content.html#the-p-element) elements, optionally intermixed with script-supporting elements.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOM interface:

Uses [HTMLElement](dom.html#htmlelement).

The [hgroup](#the-hgroup-element) element represents a heading and related content. The element may be used to group an [h1](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements)–[h6](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) element with one or more[p](grouping-content.html#the-p-element) elements containing content representing a subheading, alternative title, or tagline.

Here are some examples of valid headings contained within an [hgroup](#the-hgroup-element) element.

<hgroup>
 <h1>The reality dysfunction</h1>
 <p>Space is not the only void</p>
</hgroup>

<hgroup>
 <h1>Dr. Strangelove</h1>
 <p>Or: How I Learned to Stop Worrying and Love the Bomb</p>
</hgroup>

Element/header

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

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 or element descendants.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

Accessibility considerations:

If there is an ancestor sectioning content element: for authors; for implementers.

Otherwise: for authors; for implementers.

DOM interface:

Uses .

The element represents a group of introductory or navigational aids.

A element is intended to usually contain a heading (an [h1](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements)–[h6](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) element or an element), but this is not required. The element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

Here are some sample headers. This first one is for a game:

<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>

The following snippet shows how the element can be used to mark up a specification's header:

<header>
 <hgroup>
  <h1>Fullscreen API</h1>
  <p>Living Standard — Last Updated 19 October 2015<p>
 </hgroup>
 <dl>
  <dt>Participate:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd>
  <dt>Commits:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd>
 </dl>
</header>

The element is not sectioning content; it doesn't introduce a new section.

In this example, the page has a page heading given by the [h1](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) element, and two subsections whose headings are given by [h2](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) elements. The content after the element is still part of the last subsection started in the element, because the element doesn't take part in theoutline algorithm.

<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...

Element/footer

Support in all current engines.

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

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 or element descendants.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

Accessibility considerations:

If there is an ancestor sectioning content element: for authors; for implementers.

Otherwise: for authors; for implementers.

DOM interface:

Uses .

The element represents a footer for its nearest ancestorsectioning content element, or for the body element if there is no such ancestor. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

When the element contains entire sections, they represent appendices, indices, long colophons, verbose license agreements, and other such content.

Contact information for the author or editor of a section belongs in an element, possibly itself inside a . Bylines and other information that could be suitable for both a or a can be placed in either (or neither). The primary purpose of these elements is merely to help the author write self-explanatory markup that is easy to maintain and style; they are not intended to impose specific structures on authors.

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

When there is no ancestor sectioning content element, then it applies to the whole page.

The element is not itself 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>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <p>The ipsum of all lorems</p>
 </hgroup>
 <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>

Here is an example which shows the element being used both for a site-wide footer and for a section footer.

<!DOCTYPE HTML>
<HTML LANG="en"><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
 <H1>Episode 15</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">Download video</A>.</P>
 </VIDEO>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>My Favorite Trains</H1>
 <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> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P>
 </FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide 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>Copyright © 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>
  <nav>
   <section>
    <h1>Articles</h1>
    <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">Part
    1</a> · <a href="articles/somersaults/2">Part 2</a></p>
    <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
    a clif<!-- sic -->? 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"> 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>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
 </footer>
</body>

4.3.10 The address element

Element/address

Support in all current engines.

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Categories:

Flow content.

Palpable content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Flow content, but with no heading content descendants, no sectioning content descendants, and no , , or[address](#the-address-element) element descendants.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOM interface:

Uses [HTMLElement](dom.html#htmlelement).

The [address](#the-address-element) element represents the contact information for its nearest [article](#the-article-element) or [body](#the-body-element) element ancestor. If that is the body element, then the contact information 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](#the-address-element) element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The[p](grouping-content.html#the-p-element) element is the appropriate element for marking up postal addresses in general.)

The [address](#the-address-element) element must not contain information other than contact information.

For example, the following is non-conforming use of the[address](#the-address-element) element:

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

Typically, the [address](#the-address-element) element would be included along with other information in a element.

The contact information for a node node is a collection of[address](#the-address-element) elements defined by the first applicable entry from the following list:

If node is an [article](#the-article-element) element

If node is a [body](#the-body-element) element

The contact information consists of all the [address](#the-address-element) elements that have node as an ancestor and do not have another [body](#the-body-element) or[article](#the-article-element) element ancestor that is a descendant of node.

If node has an ancestor element that is an [article](#the-article-element) element

If node has an ancestor element that is a [body](#the-body-element) element

The contact information of node is the same as the contact information of the nearest [article](#the-article-element) or [body](#the-body-element) element ancestor, whichever is nearest.

If node's node document has a body element

The contact information of node is the same as the contact information ofthe body element of the [Document](dom.html#document).

Otherwise

There is no contact information for node.

User agents may expose the contact information of a node to the user, or use it for other purposes, such as indexing sections based on the sections' contact information.

In this example the footer contains contact information and a copyright notice.

<footer>
 <address>
  For more details, contact
  <a href="mailto:js@example.com">John Smith</a>.
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

4.3.11 Headings and outlines

[h1](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements)–[h6](#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) elements have a heading level, which is given by the number in the element's name.

These elements represent headings. The lower a heading's heading level is, the fewer ancestor sections the heading has.

The outline is all headings in a document, in tree order.

The outline should be used for 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 heading.

If a document has one or more headings, at least a single heading within the outline should have a heading level of 1.

Each heading following another heading lead in the outline must have a heading level that is less than, equal to, or 1 greater than lead'sheading level.

The following example is non-conforming:

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h3>Taste</h3>
  <p>They taste lovely.</p>
 </section>
</body>

It could be written as follows and then it would be conforming:

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
 </section>
</body>

4.3.11.1 Sample outlines

The following markup fragment:

<body>
  <hgroup id="document-title">
    <h1>HTML: Living Standard</h1>
    <p>Last Updated 12 August 2016</p>
  </hgroup>
  <p>Some intro to the document.</p>
  <h2>Table of contents</h2>
  <ol id=toc>...</ol>
  <h2>First section</h2>
  <p>Some intro to the first section.</p>
</body>

...results in 3 document headings:

1. <h1>HTML: Living Standard</h1>
2. <h2>Table of contents</h2>.
3. <h2>First section</h2>.

A rendered view of the outline might look like:

First, here is a document, which is a book with very short chapters and subsections:

<!DOCTYPE HTML>
<html lang=en>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<h2>Earning money</h2>
<p>Earning money is good.</p>
<h3>Getting a job</h3>
<p>To earn money you typically need a job.</p>
<h2>Spending money</h2>
<p>Spending is what money is mainly used for.</p>
<h3>Cheap things</h3>
<p>Buying cheap things often not cost-effective.</p>
<h3>Expensive things</h3>
<p>The most expensive thing is often not the most cost-effective either.</p>
<h2>Investing money</h2>
<p>You can lend your money to other people.</p>
<h2>Losing money</h2>
<p>If you spend money or invest money, sooner or later you will lose money.
<h3>Poor judgement</h3>
<p>Usually if you lose money it's because you made a mistake.</p>

Its outline could be presented as follows:

1. The Tax Book
   1. Earning money
      1. Getting a job
   2. Spending money
      1. Cheap things
      2. Expensive things
   3. Investing money
   4. Losing money
      1. Poor judgement

Notice that the [title](semantics.html#the-title-element) element is not a heading.

A document can contain multiple top-level headings:

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<h1>Apples</h1>
<p>Pomaceous.</p>
<h1>Bananas</h1>
<p>Edible.</p>
<h1>Carambola</h1>
<p>Star.</p>

The document's outline could be presented as follows:

1. Apples
2. Bananas
3. Carambola

elements do not influence the outline of a document:

<!DOCTYPE HTML>
<html lang="en">
<title>We're adopting a child! — Ray's blog</title>
<h1>Ray's blog</h1>
<article>
 <header>
  <nav>
   <a href="?t=-1d">Yesterday</a>;
   <a href="?t=-7d">Last week</a>;
   <a href="?t=-1m">Last month</a>
  </nav>
  <h2>We're adopting a child!</h2>
 </header>
 <p>As of today, Janine and I have signed the papers to become
 the proud parents of baby Diane! We've been looking forward to
 this day for weeks.</p>
</article>
</html>

The document's outline could be presented as follows:

1. Ray's blog
   1. We're adopting a child!

The following example is conforming, but not encouraged as it has no heading whose heading level is 1:

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<section>
 <h2>Apples</h2>
 <p>Pomaceous.</p>
</section>
<section>
 <h2>Bananas</h2>
 <p>Edible.</p>
</section>
<section>
 <h2>Carambola</h2>
 <p>Star.</p>
</section>

The document's outline could be presented as follows:

1. 1. Apples
   2. Bananas
   3. Carambola

The following example is conforming, but not encouraged as the first heading's heading level is not 1:

<!DOCTYPE HTML>
<html lang=en>
<title>Feathers on The Site of Encyclopedic Knowledge</title>
 <h2>A plea from our caretakers</h2>
 <p>Please, we beg of you, send help! We're stuck in the server room!</p>
<h1>Feathers</h1>
<p>Epidermal growths.</p>

The document's outline could be presented as follows:

1. 1. A plea from our caretakers
2. Feathers

4.3.11.2 Exposing outlines to users

User agents are encouraged to expose page outlines to users to aid in navigation. This is especially true for non-visual media, e.g. screen readers.

For instance, a user agent could map the arrow keys as follows:

Shift + ← Left

Go to previous heading

Shift + → Right

Go to next heading

Shift + ↑ Up

Go to next heading whose level is one less than the current heading's level

Shift + ↓ Down

Go to next heading whose level is the same as the current heading's level

4.3.12 Usage summary

This section is non-normative.

4.3.12.1 Article or section?

This section is non-normative.

A [section](#the-section-element) forms part of something else. An [article](#the-article-element) 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](#the-section-element) because there'd be lots of other chapters on (maybe) other kinds of apples.

On the other hand, one could imagine a tweet or reddit comment 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](#the-article-element)s because that was the whole thing.

A comment on an article is not part of the [article](#the-article-element) on which it is commenting, therefore it is its own [article](#the-article-element).

← 4 The elements of HTML — Table of Contents — 4.4 Grouping content →