3

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?

  • "while having the same level as a subsection": Could you explain this? They aren’t on the same level, so why wouldn’t it make sense? – unor Feb 27 '15 at 12:59
  • By the topic, this would belong to StackOverflow. But this is a primarily opinion-based, semantic hair-splitting question. The only technical aspect is really that the “outline algorithm” and the idea of treating h1 as being at different levels according to nesting is purely theoretical, not implemented in browsers or other software. – Jukka K. Korpela Feb 27 '15 at 22:37
  • @unor I phrased it really badly, but the main idea is, that despite one article being sorted in a subsection, I don't quite feel it makes sense for their headings to be marked up with different h tags. And the higher level article uses the same tag, as the heading of the subsection, while they are quite a different thing. – Viniter Feb 27 '15 at 22:39
3

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.

  • Interesting, I was under the impression that it was the first option that was encouraged in HTML5. What would be practical implication of using the first method from accessibility standpoint? Could you possibly refer me to a resource dealing with current user agents' accessibility features, and how they are affected by outline algorithm implementation (or lack there of)? – Viniter Feb 27 '15 at 23:13
  • @Viniter: I don’t know such a document (I guess it’s hard to come up with current results for unspecified user agents … there are so many of them). The practical implication? User agents that don’t know the outline algorithm will probably view this document like an HTML 4.01 document that only uses h1: a flat line of headings, no hierarchy. This is of course only relevant if they do something with the headings,, e.g., showing an outline (like a table of contents), or announcing heading rank in a screen reader etc. – unor Feb 28 '15 at 0:58
1

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 */
}
  • 1
    Is really using header element like that the correct way? Precisely because it represents "group of introductory or navigational aids", I feel like it looses the semantics for what actually represents a heading. Furthermore what if you have a title and a subtitle in an article, that way you still have to add h1, h2 tags, inside of the header, inside of the article which in the end seems just a bit redundant. Also, a header's header? Really? – Viniter Feb 27 '15 at 9:55
  • If you want to use header, use it in addition to heading elements, not instead of them. Your example has no headings, which is bad for various consumers (like screen readers, search engines etc.). – unor Feb 27 '15 at 13:01
  • One should consider <header> as <div> with semantics of "all the stuff before the main content that is directly related to said content". You need to use <h1> or some other element to designate the actual headíngs. – Mikko Rantalainen Oct 23 '17 at 9:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.