html - HTML5 nested sections and heading tags

Question

I have section tags nested underneath another section tag. Is it okay to have start the headings from 1 again?

For example:

<section>
   <h1>Page Title</h1>
   <section>
      <h1>Section Title</h1>
      <h2>Section Sub Title</h2>
      <p>Sub section text</p>
   </section>
   <section>
      <h1>Section Title</h1>
      <h2>Section Sub Title</h2>
      <p>Sub section text</p>
   </section>
</section>

Thanks, Mark

Answer 1

Yes, it’s valid.

However, HTML5 encourages to use

[…] headings of the appropriate rank for the section's nesting level.

But it’s not a requirement, so you are free to choose. Using h1 everywhere allows for moving sections without having to adjust the heading ranks (although it would never be invalid, even if the ranks are messed up after moving) and for deep hierarchies (i.e., more than 6 levels); using the appropriate ranks might help (older) user-agents that don’t have the algorithm implemented.

---

Also note that they encourage to

[…] explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

Following this advice and using h1 everywhere, your example would be:

<section>
   <h1>Page Title</h1>
   <section>
      <h1>Section Title</h1>
      <section>
        <h1>Section Sub Title</h1>
        <p>Sub section text</p>
      </section>
   </section>
   <section>
      <h1>Section Title</h1>
      <section>
        <h1>Section Sub Title</h1>
        <p>Sub section text</p>
      </section>
   </section>
</section>

Following both pieces of advice, it would be:

<!-- assuming that this section is a child of the body element -->
<section>
   <h2>Page Title</h2>
   <section>
      <h3>Section Title</h3>
      <section>
        <h4>Section Sub Title</h4>
        <p>Sub section text</p>
      </section>
   </section>
   <section>
      <h3>Section Title</h3>
      <section>
        <h4>Section Sub Title</h4>
        <p>Sub section text</p>
      </section>
   </section>
</section>