Better outlines in HTML for improved accessibility and SEO

html5

In HTML5 article, aside, nav, and section are sectioning content elements. They create explicit conceptual sections and define scope for headings and footers inside them. You can however use h1-h6 to create implied conceptual sections, but W3C encourages using sectioning elements rather than relying on implied sections. The level of heading you use should match the nesting level of its section and skipping heading levels should be avoided.

Also note that elements such as header, footer, and main do not create a conceptual section and have no effect on outline of a document.

Below markup is an example of a semantic markup with correct outline:

<body>
  <header>
    <nav aria-label="Site Navigation">
      <ul>
        <li><a href="#">Home</li>
        <li><a href="#">About</li>
        <li><a href="#">Contact</li>
      </ul>
    </nav>
  </header>
  <nav aria-label="Breadcrumb">
    <ol>
      <li>Home</li>
    </ol>
  </nav>
  <main>
    <article>
      <h1>Heading 1 (for article)</h1>
      <p>Lorem ipsum</p>
      <section>
        <h2>Heading 2 (for 1st section of article)</h2>
        <p>Lorem ipsum</p>
          <section>
            <h3>Heading 3 (for section inside another section)</h3>
            <p>Lorem ipsum</p>
          </section>
      </section>
    </article>
  </main>
  <aside>
    <h1>Heading 1 (for aside)</h1>
    <p>Lorem</p>
  </aside>
  <footer>footer...</footer>
</body>

You can use the following web-based HTML outliner or install the Chrome extension to check outlines generated for your DOM tree: https://gsnedders.html5.org/outliner/