CODEWITHSUNDEEP
html
Džuris
Džuris

Reputation: 2234

Should I restart heading tag numbering when nesting?

Let's consider a html book (to step away from the usual blog post example).

The code might look something like this:

<!DOCTYPE html>
<html>
<head>
    <title>The title</title>
</head>

<body>
    <h1>The title</h1>

    <article class="the-book">
        <h2>Chapter I</h2>
        <section>
            <!-- the contents -->
        </section>

        <h2>Chapter II</h2>
        <section>
            <!-- the contents -->
        </section>
    </article>
</body>
</html>

What would be the correct heading numbering within chapters? Is it correct to restart the numbering in the new scope and use <h1>, <h2> again? Or do we use the next unused level (<h3>)?

I am asking this in context of semantics and correct HTML5 code not of presentation.

Upvotes: 2

Views: 466

Answers (1)

aardrian
aardrian

Reputation: 9019

The best way is to keep your nesting valid regardless of the expected scoping of <article> and <section>. In other words, for choosing your <h#> level, pretend <article> and <section> do not exist.

You may be thinking of the HTML5 Document Outline Algorithm, but the Document Outline Algorithm was never a recommendation in a final W3C spec. There was a warning explicitly against authors relying on it, though the outline language was retained for browsers to understand how to implement support (eventually).

It has been removed from the HTML5 specification (June 9), the HTML validator has been updated to recognize that no browser ever implemented it (June 16), and there is no action on any of the open bugs with the browsers to do anything about it (Chromium, Firefox, WebKit, IE / Edge).

You can get the latest take on heading structure in the HTML 5.2 draft spec, recent as of January 14, 2018 (it updates regularly).

If you want more context or history, I have a blog post that covers it with links to the spec sources. Just go to the bullet list at the bottom: http://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html

Upvotes: 2

Related Questions