Using HTML sections and outlines

Important: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the outline algorithm should not be used to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

The HTML5 specification includes several semantic elements to help organize documents. Semantic elements are specifically designed to communicate meaning to the browser, developer, reader, and any other technologies interpreting the document (e.g. voice assistants).

For example <div> does not contain any meaning about its content but <figcaption> clearly describes the content contained.

New semantic elements were added to HTML5 to improve the sectioning of websites. It is important for developers to not use these semantic elements other than their indicated purpose. Many accessibility tools rely on semantic HTML5 elements.

Section Elements in HTML5

  • HTML Navigational Element (<nav>) defines a section that contains navigation links that appear often on a site. You can have primary and secondary menus, but you never nest, or put a <nav> element inside a <nav> element.
  • HTML Article Element (<article>) defines a piece of self-contained content. It does not refer to the main content alone and can be used for comments and widgets.
  • HTML Section Element (<section>) defines a section of a document to indicate a related grouping of semantic meaning. Utilize the section element providing extra context from the parent element makes sense.
  • HTML Aside Element (<aside>) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.

Other Semantic HTML elements used in Sectioning

  • HTML Body Element (<body>) defines all the content of a document. It contains all the content and HTML tags.
  • HTML Header Element (<header>) defines a page which typically contains the logo, title, and navigation. The header can also be used in other semantic elements such as <article> or <section> — or section header, containing perhaps the section's heading, author name, etc. <article>, <section>, <aside>, and <nav> can have their own <header>. Despite its name, it is not necessarily positioned at the beginning of the page or section.
  • HTML Footer Element (<footer>) defines a page footer which typically contains the copyright, legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. <article>, <section>, <aside>, and <nav> can have their own <footer>. Despite its name, it is not necessarily positioned at the end of the page or section.

How Do Sectional Elements Work?

 <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
        </ul>
      </nav>
      <h1>
        Page Title
      </h1>
    </header>

    <section>
      <h2>
        My Blog Posts
      </h2>
      <article>
        <header>
          <p>
            Article Title
          </p>
        </header>
        <p>
          content
        </p>
      </article>
      <article>
        <header>
          <p>
            Article Title
          </p>
        </header>
        <p>
          content
        </p>
      </article>
      <aside>
        <p>
          Author info
        </p>
      </aside>
    </section>

    <footer>
      Copyright Info
    </footer>
  </body>

The <nav> element indicates a navigation block and should be used for major navigational menus.

<nav>
  <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
  </ul>
</nav>

Nesting Menus

You do not nest <nav> elements. The <nav> can contain both primary and secondary menus.

<nav>
  <ul> 
    <li><a href="#">primary link</a></li>
    <li>
      <a href="#">primary link</a>
      <ul>
        <li><a href="#">secondary link</a></li>
        <li><a href="#">secondary link</a></li>
      </ul>
    </li>
    <li><a href="#">primary link</a></li>
  </ul>
</nav>

Use the <nav> element only for site navigation menus. Collections of links such as social media profiles or a blogroll should not be wrapped in the <nav> element.

HTML Elements in <nav>

While list elements are common for navigation they are not required. You can use other elements such as <p>.

Article Element

The <article> element indicates self-contained content, meaning that if you removed all the other HTML except the <article> element, the content would still make sense to a reader.

<article>
  <h1>How to Become an MDN Contributor</h1>
  <p>
    Do you want to help protect the web?....
  </p>
</article>

Nesting Elements Inside an Article

The <article> element can have other semantic elements such as headers, asides, and footers. This is often useful if you want to add CSS selectors to the class property of the element to style the document.

<article>
  <header>
    <h1>How to Become an MDN Contributor</h1>
  </header>
  <p>
    Do you want to help protect the web?.... 
  </p> 
  <aside>
    <blockquote>
      Amazing quote from article
    </blockquote>
  </aside>
  <footer>
    <p>
      Author info, publication date
    </p>
  </footer>
</article>

Nesting articles and sections

Articles can be nested inside of sections and sections can be nested inside of articles. A book, for example, may be divided up into sections with related articles. Each of these articles could contain sections of related information.

<section>
  <h1>Getting Involved</h1>
  <article>
    <header>
      <h2>How to Become an MDN Contributor</h2>
      <p>Do you want to help protect the web?....</p>
    </header> 
    <section>
      <h3>Steps to Editing an Article</h3>
    </section>
    <footer>
      <p>Author info</p>
      <p>publication date</p>
    </footer>
  </article>
</section>

Section Element

The section element is use for a thematic grouping of content. Based on the W3C spec, a section should typically contain a heading. The heading does not require the use of the <header> element

<section>
  <h1>Amazing MDN Contributors</h1>
    <ul>
      <li><img src="link" alt="descriptive text"></li>
      <li><img src="link" alt="descriptive text"></li>
      <li><img src="link" alt="descriptive text"></li>
    </ul>
</section>

Aside Element

The <aside> element defines related content that has a different placement than the main content. It is often used for call-outs, blockquotes, and definitions. The <aside> element is often used for sidebars containing extra, but relevant, information.

<section>
  <h1>Amazing MDN Contributors</h1>
    <ul>
      <li><img src="link" alt="descriptive text"></li>
      <li><img src="link" alt="descriptive text"></li>
      <li><img src="link" alt="descriptive text"></li>
    </ul>
    <aside>
     <p>To get involved contact</p>
    </aside>
</section>

Nesting Aside Elements

The <aside> element can be nested inside of other sectional HTML elements. You do not nest an <aside> inside an <aside>. Meaning a call out box would not have a call-out box inside.

Using HTML5 elements in non-HTML5 browsers

Sections and headings elements can be made to work in most non-HTML5 browsers with a couple of extra steps, and in this section we'll show you how. If a significant percentage of your particular target audience is using Internet Explorer 8 or older, then you can follow the below instructions to make them behave as expected. However, global usage of these browsers is now very small, so this is unlikely.

HTML5 semantic elements don't need a special DOM interface, but they will need a specific CSS styling in older browser that don't support them explicitly. Unknown elements are styled as display: inline by default, so you'll want to set them to display: block:

article, aside, footer, header, nav, section {
  display: block;
}

Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the <time> element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.

Next up, older IE versions do not allow styling of unsupported elements, unless you create an instance of them in the DOM. You can add a specific script to allow this, as seen below:

<!--[if lt IE 9]>
  <script>
    document.createElement("article");
    document.createElement("aside");
    document.createElement("footer");
    document.createElement("header");
    document.createElement("nav");
    document.createElement("section");
    document.createElement("time");
  </script>
<![endif]-->

As a last precaution, you could also add an explicit <noscript> element inside the <head> element to warn any users that have JavaScript disabled that your page relies on JavaScript:

<noscript>
  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
  <p>JavaScript is an object-oriented computer programming language 
    commonly used to create interactive effects within web browsers.</p>
  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
</noscript>

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

<!--[if lt IE 9]>
  <script>
    document.createElement("article");
    document.createElement("aside");
    document.createElement("footer");
    document.createElement("header");
    document.createElement("nav");
    document.createElement("section");
    document.createElement("time");
  </script>
<![endif]-->
<noscript>
  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
  <p>JavaScript is an object-oriented computer programming language 
    commonly used to create interactive effects within web browsers.</p>
  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
</noscript>

Note: This code will also cause the HTML validator to return errors. This isn't a really bad thing neccessarily — sites will often have a few validation errors — but it something to be aware of still.

Conclusion

The new semantic elements introduced in HTML5 bring the ability to describe the structure of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.