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

Lentigo

"Is it okay?" has many dimensions ;-) From the perspective of HTML validity it is. But if you ask SEO people, they'd probably advise not to have more than a single h1 element in a page. – Cytokinesis

That's not accurate, @peterp. Gone are the days when there could only be one H1 on the page. To the contrary; if you have an entirely new section of content that warrants having it's own H1, then by all means use it. OP, this concept is about semantics, as peterp said its for SEO, but also other situations like screen readers and under-capable web browsers. If the first "section" with an H1 on your page could get removed, and the second "section" with an H1 on the page could take its place appropriately, then that's a good example of when you'd use a 2nd H1. – Incitement

@Incitement Asking about "okayness" of HTML code is a bit inaccurate for itself, that's what I wanted to point out. And that's why it is a comment rather than an answer ;-) – Cytokinesis

Yeah, I understand that. Just wanted to clarify that that answer is a bit out-dated since the newer recommendation is that you actually can use multiple H1's , as long as they're justified semantically :) – Incitement

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>

Sanjuana

Super, that really helped Unor, thank you very much. – Lentigo

It is valid and acceptable but it is bad for accessibility. – Shipboard

@JakeWilson How is this bad for accessibility? Using sections with the appropriate heading element is better for accessibility than using h1s everywhere. – Milagrosmilam

Answer 2

That works fine, whether or not it works style wise depends on how you define your section and h1-h6 tags.

Just to note: Older browsers like IE 7 & 8 don't like section tag and will ignore some of the styles you apply to it. I like using div tags more since they don't rely on the user having a browser that supports HTML5 tags.

Consul

Thanks Khaltazar. Yeah I don't tend to style sections directly. I use classes for that. I was just wondering if the heading hierarchy was valid. – Lentigo

I'd just like to comment that divs are actually a bad idea because they don't represent a type of content; they're generic. Semantic code should be the goal. Google's HTML5 shiv can be used to counteract the style issues in old versions of IE. – Process