CODEWITHSUNDEEP
htmloutline
dbran
dbran

Reputation: 103

How to use basic HTML5 sections properly for a clean document outline?

I've been trying for a while now to figure out how to use semantic elements to get a clean document outline for a web page of any kind. There are still some uncertainties that keep me busy.

In the attempt, I essentially used section elements that should be found in many contemporary websites. For testing I used the HTML5 Outliner.

What confuses me most is the <footer> element, which stubbornly subordinates itself to the main content: 

<header>
  <a href="#"><img src="[logo-image]"></a>
  <h2 class="screen-reader">Name of website</h2>
  <nav>
    <h2 class="screen-reader">Navigation</h2>
    <ul>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
    </ul>
  </nav>
</header>

<main>
  <header>
    <h1>Page title</h1>
  </header>
  <section>
    <h2>Section I</h2>
    <section>
      <h3>Subsection a</h3>
    </section>
  </section>
  <section>
    <h2>Section II</h2>
    <section>
      <h3>Subsection a</h3>
    </section>
  </section>
</main>

<footer>
  <h3>Footer</h3>
</footer>

The document outline then looks like this:

  1. Name of website
    1. Navigation
    2. Page title
      1. Section I
        1. Subsection a
      2. Section II
        1. Subsection a
      3. Footer

I solved the problem by wrapping the content in <main> with <article> and the content in <footer> with <section>:

<main>
  <article>
    <header>
      <h1>Page title</h1>
    </header>
    <section>
      <h2>Section I</h2>
      <section>
        <h3>Subsection a</h3>
      </section>
    </section>
    <section>
      <h2>Section II</h2>
      <section>
        <h3>Subsection a</h3>
      </section>
    </section>
  </article>
</main>

<footer>
  <section>
    <h3>Footer</h3>
  </section>
</footer>

The document outline then looks like this, as expected:

  1. Name of website
    1. Navigation
    2. Page title
      1. Section I
        1. Subsection a
      2. Section II
        1. Subsection a
    3. Footer

To get to my question:

Is it necessary to add the elements <article> and <section> to get a clear outline regarding the <footer> element? I think there should be other solutions that make more sense. Because I'm still not sure if the use of <article> is also appropriate for web pages that do not contain articles in the sense of a blog or magazine.

I also wonder if it makes sense to exclude certain sections like <nav> only from the outline algorithm. As far as I understand, a document outline should only encompass the main content of a web page.

Upvotes: 2

Views: 234

Answers (1)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13546

The header, footer, and main elements were not categorized as "Sectioning content" and thus have no special effect on the document outline as it was initially intended in HTML5. That's why the HTML5 outliner (as well as the "Structural outline" tool in the Nu HTML Checker, ex-Validator) actually shows "Name of website" and "Page title" in your first example as the same level headings (top level): the scope of the first header is body, and the scope of the last footer is the implied section created by the h1 heading.

However, this can be not as important as it seems because, unfortunately, no browser or assistive technology has implemented the HTML5 document outline algorithm (in any aspect except default styling of h1 headings) and the whole document outline concept is now being largely reconsidered. So the most practical approach is currently to think of header, footer, nav, and main as of native way to express the corresponding ARIA landmark roles rather than something related to heading structure, and build the document outline with heading levels, just like it was before HTML5. The Nu HTML Checker displays this structure as "Heading-level outline".

Upvotes: 1

Related Questions