HTML/Usage/Headings/h1only

From W3C Wiki
Jump to: navigation, search

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:

Retrieved from "https://www.w3.org/wiki/index.php?title=HTML/Usage/Headings/h1only&oldid=110538"