Semantics of heading levels in multiple sections in HTML5

Question

I'm never quite sure what is the best, most semantic way to handle heading levels in HTML5 markup, when you have multiple sections. On one hand it makes sense to have an H1 heading as a title of a section, or an article, but it leads to these weird situations when your whole document outline is made out of H1 headings.

<header>
    <h1>Site heading</h1>
</header>
...
<section>
    <h1>Section heading</h1>
    <article>
        <h1>Article heading</h1>
        ...
    </article>
    ...
    <section>
        <h1>Subsection heading</h1>
        <article>
            <h1>Subsection article heading</h1>
            ...
        </article>
        ...
    </section>
</section>

Is this really the way to do it in HTML5? It feels a bit like the heading tags don't carry no semantic value anymore. When you see an H1 tag in a markup it doesn't tell you anything about the headings position in the document's outline.

On the other hand, when you mark your headings hierarchically, like you would before the HTML5's markup, it creates a situations where one article has a different heading level than another, while having the same level as a subsection, which also doesn't make much sense.

<header>
    <h1>Site heading</h1>
</header>
...
<section>
    <h2>Section heading</h2>
    <article>
        <h3>Article heading</h3>
        ...
    </article>
    ...
    <section>
        <h3>Subsection heading</h3>
        <article>
            <h4>Subsection article heading</h4>
            ...
        </article>
        ...
    </section>
</section>

From what I read, I understand that the first way is the correct way in HTML5, but it just doesn't feel right. Having often a whole site without single third level heading feels weird, but it might be just a case of old habits dying hard on my part, maybe?

Answer 1

If you are always using sectioning elements (wherever they are needed), it doesn’t matter which heading element (h1-h6) you choose. The outline algorithm "calculates" the correct heading rank, which depends on the nesting of your sectioning elements.

It’s not "less semantic". Don’t think of HTML5 headings as h1-h6, but as h (AFAIK such an h element wasn’t added to HTML5 because we’d lose backward compatibility; but XHTML 2.0 went this way).

You have two options:

• Use h1 everywhere (instead of h1, it could be any other heading element, and even a mix of them).
• Use heading elements of the "calculated" rank, like in HTML 4.01.

Advantages of the first option:

• You can freely insert (e.g. from external sources) and move sections, without having to adjust the markup.
• You can have more than 6 levels.

Advantage of the second option:

• It supports user agents that don’t have implemented this outline algorithm.

Note that HTML5 encourages authors to use the second option.

Answer 2

While the first way is "correct", a lot of screen readers will not interpret it as such, so the second way is more useful from an accessibility point of view.

If you are worried about the semantics, you can use the more generic HTML5 <header> element, which:

represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.

For example:

<header>
    <header>Site heading</header>
</header>
...
<section>
    <header>Section heading</header>
    <article>
        <header>Article heading</header>
        ...
    </article>
    ...
    <section>
        <header>Subsection heading</header>
        <article>
            <header>Subsection article heading</header>
            ...
        </article>
        ...
    </section>
</section>

Essentially, it carries much the same semantics as your first example, however the nested use of sections provides a semantic hierarchy to the <header> elements, that isn't immediately understandable by the use of nested <h1>.

Your concern then becomes about styling, which is a presentation issue and can be done in CSS:

header {
    font-weight: blod;
}
section > header {
    font-size:140%; /* like h1 */
}

section > section > header
    font-size:130%; /* like h2 */
}

section > section > header
    font-size:120%; /* like h3 */
}