Skip to content
UX Atlas
Plate A11Y·006 · AccessibilityGrid B4 · Rev. 2026-09-14

Heading Structure

Headings are the table of contents screen reader users navigate by, so levels must follow structure rather than appearance.

AccessibilityCraft conventionFoundational

Definition

Heading elements describe document hierarchy. Assistive technology exposes them as a navigable outline, which makes the correct level a functional requirement rather than a styling choice.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Rules
  3. 3The same page, structured and unstructured
  4. 4Choosing levels
  5. 5The outline people navigate by
  6. 6Commonly confused with
  7. 7Local chart
  8. 8Continue from here

Reach for this when

  • Any content page.
  • Reviewing semantic markup.
  • Building a documentation or article template.

Common mistakes

  • Heading level chosen for font size.
  • Skipped levels.
  • Multiple h1 elements.
  • Sections with no heading at all.

Rules

  • One h1 per page, describing what the page is about.
  • Do not skip levels going down. An h2 followed by an h4 breaks the outline.
  • Choose the level from structure, then apply whichever visual style is correct. The two are independent.
  • Do not use headings for visual emphasis on text that is not a heading.
  • Every major section should have a heading, including ones that look self-evident visually.
  • In single-page applications, ensure the h1 updates on route change.

The same page, structured and unstructured

html
<!-- Structure carried by the markup -->
<h1>Invoices</h1>
  <h2>Outstanding</h2>
    <h3>Overdue</h3>
  <h2>Paid</h2>

<!-- The same thing, invisible to anyone navigating by heading -->
<div class="page-title">Invoices</div>
  <p class="section-label">Outstanding</p>
    <strong>Overdue</strong>
  <p class="section-label">Paid</p>

<!-- Also wrong: level chosen for its size -->
<h1>Invoices</h1>
  <h4>Outstanding</h4>  <!-- picked because h4 looked right -->

Both render almost identically. Only the first can be navigated, outlined or understood without sight of the layout.

Choosing levels

Do

  • Pick the level from the structure, then style it however the design requires.
  • Write headings that make sense read on their own, since that is how they are often heard.
  • Update the h1 on route change in a single-page application.
  • Give repeated regions their own heading, even where the layout makes the grouping obvious.

Do not

  • Do not skip a level to get a smaller size.
  • Do not use a heading for a label, a legend or an emphasised sentence.
  • Do not ship more than one h1 per page, which leaves no single answer to what this page is.
  • Do not hide a heading that readers would benefit from seeing just because the design has no room. Find the room.

The outline people navigate by

Navigableh1Invoicesh2Outstandingh3Overdueh2PaidBroken outlineh1Invoicesh4OutstandingdivOverdueh4PaidLevel comes from structure. Size comes from the stylesheet. The two are independent.
Both versions can be styled to look identical. Only the left one can be listed, jumped through or understood without seeing the layout.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Typographic Hierarchy

UI foundation

The named text roles that make relative importance visible before reading.

Key difference

Heading structure is the outline assistive technology navigates by, and it must follow the document, not the design. Typographic hierarchy is how importance is made visible. Big bold text is not a heading, and a heading need not be big.

Use Heading Structure when

  • Levels are chosen for size, or skipped to avoid a style.
  • Screen reader users need to skim sections.
  • The fix is which element is used, not how it looks.

Use Typographic Hierarchy when

  • Everything reads as equally important, or the page looks flat.
  • You are defining the type scale and its roles.
  • The fix is size, weight, colour and space.

Learn about Typographic Hierarchy

Local chart

A11Y·006 · Region V · Grid B4

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Screen ReadersA11Y·005 · RELIED ON BYAccordionCMP·017 · RELIED ON BYWAVETOOL·030 · OFTEN USED WITHTypographic HierarchyFND·032 · COMMONLY CONFUSED WITHScreen ReaderTERM·076 · SHORT DEFINITIONSEOTERM·129 · SHORT DEFINITIONWCAG in PracticeA11Y·001 · RELATED CONCEPTInformation ArchitectureRES·015 · RELATED CONCEPTContent DesignWRT·004 · RELATED CONCEPTSEO for Content ProductsWRT·007 · RELATED CONCEPT

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

Navigation

Relied on by

Entries that assume this is already in place.

  • Screen ReadersA11Y·005 · Accessibility

    Headings are the primary way screen reader users skim a page.

  • AccordionCMP·017 · Component

Often used with

These usually appear in the same screen or the same decision.

  • WAVETOOL·030 · Tool

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.