HTML/Usage/Headings/h1only
Using only h1 elements in a HTML document results in a flat document outline as heading element semantics are conveyed to users as per the numeric in the heading element tag name.
Example code: using nested section and h1 elements
<body> <h1>top level heading</h1> <section><h1>(intended) 2nd level heading</h1> <section><h1>(intended) 3nd level heading</h1> </section> </section>
Intended document outline:
→ top level heading → → 2nd level heading → → → 3rd level heading
Actual document outline exposed by browsers and assistive technology
→ top level heading → top level heading → top level heading
Example code: to convey intended document outline
<body> <h1>top level heading</h1> <section><h2>(intended) 2nd level heading</h2> <section><h3>(intended) 3nd level heading</h3> </section> </section>
Heading semantics exposed by browsers
The following popular browsers expose the semantics of h1 to h6 elements to assistive technology (e.g. screen readers), by reference to the numeric in their TagNames (h1 = heading level 1 and so on):
- Firefox
- Internet Explorer
- Chrome
- Opera
- Safari
Heading semantics conveyed by screen readers
The following popular screen readers expose the semantics of h1 to h6 elements to users based on the information provided by graphical browsers (h1 = heading level 1 and so on):
- JAWS
- NVDA
- VoiceOver
- Window Eyes
Notes
These lists are not exhaustive.
Related HTML and browser implementation bugs:
- initial pass at article definition rewrite - HTML5.1 bug
- What to do about the document outline? - HTML5.1 bug
- Do not recommend using nested sections with h1 - HTML5.1 bug
- modify required heading mappings to reflect reality – HTML spec bug
- expose (heading) level in acc layer based on heading elements outline depth – chrome bug
- expose heading level in acc layer based on outline depth not heading numeric value – Firefox bug
- AX: expose (heading) level based on heading elements outline depth – Webkit bug
- expose output of html5 outline algorithm as a DOM method – IE bug