9

When I put a website I am building through a W3C checker it asks me to consider only using h1's as a top level heading and points out a section where I have a h1 inside of a section. It also mentions that screen readers will treat them all as top level elements, however, according to HTML5 specs, sections effectively "reset" the headings so you can start another hierarchy from 1-6 within them.

Should I only be using h2-h6 within sections if we are trying to focus on W3C validation and accessibility? Or is this warning incorrect?

Improve this question
2
  • 1
    w3c does not say that it is invalid, it just tells you that although the markup is valid you should consider to do it a different way right now, because some browser/screen reader might handle that setup in a way that you don't expect.
    – t.niese
    Commented Feb 10, 2016 at 12:17
  • 3
    Yes, you should only be using h2-h6 within sections. I strongly recommend that you read paciellogroup.com/blog/2013/10/html5-document-outline
    – Alohci
    Commented Feb 10, 2016 at 21:39

3 Answers 3

Reset to default
5

Using h1 everywhere is valid (if sectioning elements are used correctly), but the HTML5 spec encourages authors to use heading elements of the rank corresponding to the section’s nesting (h1-h6).

Why encouraging not to use h1 everywhere, although this can be beneficial? Most likely because not all relevant user agents (like screen readers) support the HTML5 outline algorithm.

So if you want to support screen readers that don’t support HTML5 and/or the outline algorithm, you may want to follow the advice to use heading elements of the appropriate rank.

Improve this answer
2
  • 1
    It seems that the current status in year 2021 is still unclear and nobody seems to be sure if accessible pages should be authored per HTML4 or HTML5 spec. And for HTML5 it's unclear if one should follow W3C HTML5 or WHATWG spec. Note that W3C HTML 5.1 at https://www.w3.org/TR/html51/ redirects to WHATWG spec so I guess that should be considered the recommended version nowadays. I guess that for best compatiblity you should author content using WHATWG sectioning elements such as <article> and <section> and use h1...h6 inside those elements matching the outline algorithm values.
    – Mikko Rantalainen
    Commented Nov 17, 2021 at 12:03
  • 1
    In theory it should be okay to use just the sectioning elements and <h1> everywhere but real world user agents used by people needing accessibility aids are still failing to support HTML5 properly in year 2021.
    – Mikko Rantalainen
    Commented Nov 17, 2021 at 12:06
3

Despite the fact that it's not gramatically incorrect to reset headings level whenever you have a new section, it's a good habit to follow the advice given by the tool you are using and implement a heading hierarchy correctly structured within the full document.

For example, some screenreader might give you the ability to use some shortcut to go the the next h1 heading using some shortcut, and you can't suppose that the implementation would be the same in every screen reader. Some might chose to go the next h1 inside in the same section, some might chose to go to the next h1 in the DOM order.

Improve this answer
-5

This warning is correct. There should only be one h1 per page, and it should match the page title. You can have multiple H2s to signify the start of new sections under the H1 and break those down further with H3 or H4 like an outline. Screen reader users rely on the H1 to signal the start of the main content. If you have multiple H1s, it is disorienting, and they now have to read through all the content of each section to understand the structure of the page.

Improve this answer
1
  • 12
    I'm a screen reader user and what you say is wrong. Having multiple H1 cause no problem at all and isn't at all disorienting. Sometimes it's even beneficial, because it allows to jump even faster to key parts of the page; sometimes it's better to have several H1 rather than a single H1 and several H2; a single H1 identical in all pages is in fact quite useless.
    – QuentinC
    Commented Sep 26, 2019 at 21:02

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