How can HTML5 sections and outlines be used properly?

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 introduced several semantic sectioning elements to help organize the structure of documents. Semantic sectioning elements are specifically designed to communicate structural meaning to browsers and other technologies interpreting the document on behalf of users, such as screen readers and voice assistants.

Semantic sectioning elements clarify the larger-scale structures within a document. They are intended to enhance the limited semantics of earlier versions of HTML, which included only the <div> tag as a generic mechanism for grouping related content. For example, <div class="navigation"> does not suggest any meaning about its content to a browser; only a human reading the HTML source can divine the meaning of a class like navigation. By contrast, the <nav> sectioning element more clearly describes to browsers and other devices the content contained: links or other navigational structures to help users move through and understand where they are in a site's or page's content.

New semantic elements were added to HTML5 to improve and clarify the sectioning of websites into meaningful areas of content. It is important for developers to use these semantic elements in line with their intended purposes. Many accessibility tools as well as reader views provided by some browsers rely on semantic sectioning elements. So don't swap out an existing tangle of <div> elements for a bunch of <section> 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 cannot nest a <nav> element inside another <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. It makes sense to use the section element to provide extra context for the parent element.
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. The aside element 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 area that typically contains a logo, title, and navigation. The header can also be used inside other semantic elements such as <article> or <section>. A section header might contain the section's heading, author name, etc. <article>, <section>, <aside>, and <nav> can have their own <header>. Despite its name, the header is not necessarily positioned at the beginning of a page or section.
HTML Footer Element (<footer>) defines a page footer, which typically contains copyright or legal notices and sometimes some links. In the context of a section, a footer might contain the sectioned content's publication date, license information, etc. <article>, <section>, <aside>, and <nav> can have their own <footer>. Despite its name, the footer is not necessarily positioned at the end of a 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>`

Nav Element

The <nav> element indicates a navigation block and should be used to mark up a document's primary navigation functionality.

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

Nesting Menus

You shouldn't nest multiple <nav> elements. A single <nav> can contain multiple levels of menu hierarchy, or related navigation features.

<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>

Collection of Links

The <nav> element should be used to mark up the page's primary navigation, for example, a navigation menu or a search box. For other collections of links — such as social media profiles or related links — a <aside> or <section> element may be more suitable.

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 used 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 necessarily — sites will often have a few validation errors — but it's 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.

Source: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines