Heading Hierarchy
The nested h1–h6 outline of a page. Descend one level at a time; use CSS for size.
Heading hierarchy is the nested structure of h1 through h6 on a page. Levels should descend without skipping — an h3 belongs under an h2 — because that structure is the outline screen-reader users navigate by and the shape retrieval systems use to find the passage answering a question. Headings are structure, not styling.
Definition
Heading hierarchy is the nesting order of <h1> through <h6>. Levels descend by one: an <h3> belongs under an <h2>, which belongs under the page’s <h1>. Skipping a level — h2 straight to h4 — breaks the outline.
Headings are structure, not styling. Choosing <h4> because it happens to be the right size is the most common way hierarchies break; the fix is CSS, not a different tag.
Why It Matters
Screen-reader users navigate by heading level, so a broken outline is a broken navigation system — WCAG 1.3.1 covers exactly this. Search engines and AI summarisers use the same outline to work out which passage answers which question, which is what gets a specific section quoted rather than the whole page ignored.
Example
A correct outline reads: h1 How to run an SEO audit → h2 Technical checks → h3 Crawlability → h3 Indexation → h2 Content checks. A broken one jumps from the h1 to an h4 because the designer wanted smaller text.
Related Terms
Related Tools
Know the term.
Check your own site.
A free audit tells you whether this is currently costing you score points — and exactly what to change.
Run a free audit