Text

Headings

Published on

Description

Headings (h1-h6) create a document outline for both visual and assistive technology users. Use a single h1 per page and maintain a logical heading hierarchy without skipping levels.

Example

Open in new tab
View HTML markup 
  <h2 id="h2">Heading 2 <a href="#h2" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">anchor</span> </a></h2>
<h3 id="h3">Heading 3 <a href="#h3" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">anchor</span> </a></h3>
<h4 id="h4">Heading 4 <a href="#h4" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">anchor</span> </a></h4>
<h5 id="h5">Heading 5 <a href="#h5" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">anchor</span> </a></h5>
<h6 id="h6">Heading 6 <a href="#h6" class="noprint"><span aria-hidden="true">#</span><span class="visually-hidden">anchor</span> </a></h6>

Accessibility

  • Each heading level (h1-h6) has an implicit ARIA role of heading with an aria-level matching the number.
  • Screen reader users rely on heading structure for navigation — roughly 82% use headings to find content.
  • Use a single <h1> per page. The HTML5 document outline algorithm was never implemented by any browser or assistive technology.
  • Do not skip heading levels (e.g. h2 to h4). Assistive technology may announce gaps as missing content.
  • Avoid heading levels above h6. Browser and screen reader support for aria-level above 6 is inconsistent.

References

Variables

Set the size of headings