9

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

markwilliamsweb
  • 470
  • 6
  • 15
  • "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. – peterp Aug 13 '14 at 08:14
  • 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. – dudewad Aug 17 '15 at 17:28
  • @dudewad 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 ;-) – peterp Aug 17 '15 at 17:55
  • 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 :) – dudewad Aug 17 '15 at 22:14

2 Answers2

16

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>
Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
1

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.

Khaltazar
  • 296
  • 1
  • 7
  • 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. – markwilliamsweb Jul 27 '14 at 22:20
  • 1
    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. – Micah Henning Dec 31 '14 at 16:30