A Digital Accessibility Quick Reference Guide

Heading tag

Heading Hierarchies

—

by

ltrayers
in

Think of headings as an outline or table of contents for your webpage or document. If a user only reads the headings, they should understand the structure and purpose of the content

Heading 1 <h1>

  • One per page.
  • Main topic of the page.
  • Use the same (or similar) keywords as the HTML <title> tag.
  • Screen reader users expect to jump to this using the “1” key.

Sub-headings

  • Use <h2> and <h3> for sections and sub-sections.
  • Avoid skipping levels (e.g., don’t go from <h1> to <h4>).
  • <h4>–<h6> are available, but usually a sign the page has too much depth.

View Heading Hierarchy on a Webpage

Use tools like Accessibility Insights or WAVE to check heading order and levels.

Example of a webpage with headings highlighted and labels by level.

View Heading Hierarchy in Microsoft Word

In the ribbon, go to the View tab, then choose Navigation Pane to display the list of the headings in your document.

Screenshot of Microsoft Word with the Navigation panel open and displaying a list of document headings.

Side-bars, Asides, and “Right Rails”

  • These often start at <h2> or <h3>.
  • They rarely contain <h1>. Keep that reserved for the main page content.