Heading Structure: Build a Clear Page Outline
Also called: Heading hierarchy, Heading levels, Document outline
Definition
Heading structure is the outline a page forms through its h1 to h6 elements. Each heading marks the start of a section, and its level shows where that section sits in the hierarchy.
Heading structure is the outline your page builds with the elements <h1> to <h6>. Sighted visitors see big, bold titles and grasp the layout in seconds. Screen reader users get the same overview only if those titles are real headings – then they can list them and jump from section to section with one key.
What it means
WCAG 1.3.1 Info and Relationships (Level A, WCAG 2.2) requires that structure conveyed through presentation can be programmatically determined. W3C names headings as a typical case: text that looks like a heading because of its larger, bold font must also be marked as one. The sufficient techniques are H42 (using h1–h6) and ARIA12 (role="heading" with aria-level). Failure F2 describes the opposite: using only text styling to convey structure.
Two related criteria complete the picture: 2.4.6 Headings and Labels (Level AA) asks that headings describe their topic, and 2.4.10 Section Headings (Level AAA) asks that content is organized with headings at all. The advisory technique G141, "Organizing a page using headings", recommends correctly nested levels.
| Level | Typical use |
|---|---|
| h1 | The page's main topic – usually one per page |
| h2 | Main sections ("Pricing", "How it works") |
| h3 | Subsections inside an h2 |
| h4–h6 | Deeper levels, rare on marketing pages |
| Bold paragraph that looks like a heading | Not a heading for assistive technology – can fail 1.3.1 |
Headings work together with ARIA landmarks: landmarks mark the regions of a page (header, navigation, main), headings structure the content inside them.
Examples
<!-- Good: one h1, nested sections -->
<h1>Garden furniture</h1>
<h2>Lounge sets</h2>
<h3>Teak</h3>
<h3>Aluminium</h3>
<h2>Care and cleaning</h2>
<!-- Bad: looks like a heading, is not one -->
<p class="big-bold">Delivery times</p>
<!-- Bad: heading used only for large text -->
<h2>Free shipping from €50!</h2>Start with one h1 that names the page, use h2 for main sections and h3 for their subsections. Write headings that say what follows ("Delivery times to Austria"). Keep the same pattern on every template.
Fake headings with bold paragraphs, use heading tags just to make text big, wrap logos or entire banners in an h1, or leave sections without any heading so the page reads as one long block.
How to check your heading structure
Questions
How many h1 headings should a page have?
WCAG sets no number. One h1 that names the page's main topic is the clearest pattern and what most screen reader users expect, so it is the common recommendation.
Is skipping a heading level a WCAG violation?
Not on its own. W3C does not list a skipped level as a failure of 1.3.1, but it recommends nested levels because gaps confuse people who navigate by headings. It becomes a real problem when the levels contradict the visual structure.
Do headings matter for SEO?
Headings help search engines understand what each section is about, much like they help screen reader users. A clear heading structure serves both, but stuffing headings with keywords helps neither.
How do screen reader users use headings?
Many start by listing all headings or by pressing H to jump from one to the next, then read only the section they need. A page without real headings forces them to listen from the top. A skip link and landmarks add further shortcuts.
Related terms
Skipped Heading Level: Warning Explained and Fixed
A skipped heading level is a jump of more than one rank down the heading hierarchy, for example from h2 straight to h4. Screen reader users who navigate by headings may think a section is missing.
Read definition: Skipped Heading Level: Warning Explained and FixedARIA Landmarks: Page Regions for Screen Readers
ARIA landmarks are roles such as banner, navigation, main and contentinfo that identify the large regions of a page. Screen readers list them and let users jump directly to each region.
Read definition: ARIA Landmarks: Page Regions for Screen ReadersScreen Reader: How It Reads Websites and What It Needs
A screen reader is assistive software that reads the content and controls of a screen aloud or outputs them on a braille display. It relies on the names, roles and states that a website exposes through the browser's accessibility tree.
Read definition: Screen Reader: How It Reads Websites and What It NeedsSkip Link: Jump Straight to the Main Content
A skip link is a link at the very top of a page that jumps to the main content, so keyboard and screen reader users do not have to pass the whole menu on every page. It is a sufficient technique for WCAG 2.4.1.
Read definition: Skip Link: Jump Straight to the Main Content