Headings

Headings are short text phrases that introduce sections and subsections within a document or page.

Headings make digital content accessible by breaking up longer sections and giving meaningful structure to documents. Headings are not just styled bigger and bolder, but are marked up in the code and can be navigated with assistive technology tools.

Headings make digital content more accessible for people who use screen readers, are neurodivergent, and who benefit from good information design in general.

Using headings to create logical structure is required by digital accessibility standards, as described in Success Criterion 2.4.6 Headings and Labels and 1.3.1 Info and Relationships.

Best Practices

One H1

All headings have a level, 1 through 6.

Heading level 1 (h1) is used for the main title on a page or document. Most webpages or documents should only have one h1. An exception would be a longer document, where each chapter title can be an h1.

Heading Hierarchy

Heading levels 2 through 6 (h2 - h6) are used for sections and subsections, to create hierarchical structure in the page or document. Heading levels are nested sequentially and should not “skip” levels. For example, a page should not use h2 and h4 without using h3.

Visual Styles

The visual style of headings should reflect their relative level in the code, so users can visually determine the relationship between headings and sections.

However, don’t just make text big or bold and consider it a heading! Make sure to add a heading tag in the code.

Similarly, don’t use headings just to make text bigger. A pull-out quote should not be a heading.

Check Headings

When reviewing content, use an accessibility checker to determine if headings are used and if any levels are skipped. Some checkers can also identify text that looks like a heading but needs to be tagged as a heading in the code.

When editing content, highlight text and inspect the styles applied to the text. Word processors and WYSIWYG editors will have options for Heading 1, Heading 2, Heading 3, and so on.

Examples

The current webpage uses headings correctly to create a hierarchy of sections. The headings on this page are:

  • <h1>Headings</h1>
    • <h2>Best Practices</h2>
      • <h3>One H1</h3>
      • <h3>Heading Hierarchy</h3>
      • <h3>Visual Styles</h3>
    • <h2>Test Headings</h2>
    • <h2>Examples</h2>

This is correct because

  • Each heading gives a short, plan language description of the section it introduces
  • There is one h1
  • Sections and subsections have appropriate heading levels
  • No heading levels are skipped (all h2s are under an h1, all h3s are under an h2)
  • Visual styles reflect heading levels (h1 is bigger than h2, and so on)

For more examples of good headings and information on how to use headings: