Glossary
Heading hierarchy
Heading elements from `h1` to `h6` express the structure of a page: each level opens a subsection of the level above it. That structure is what lets a screen reader user jump between sections, and what tells any consumer of the page which parts belong to which. Because browsers style headings by size, the levels are routinely chosen for appearance instead of meaning, which produces a structure that contradicts the visible one.
What the levels mean
An `h2` opens a section of the page. An `h3` opens a subsection of the preceding `h2`, and so on down to `h6`.
The sequence carries the meaning. Going from `h2` to `h4` claims a subsection of something that does not exist, and a reader navigating by structure is left with a gap.
Levels are global to the page, not relative to a container. There is no working mechanism in HTML by which a heading inside a section becomes relative to it.
Correct structure means an outline that reads sensibly when the headings are extracted and indented, which is exactly what assistive technology presents.
Why people skip levels
Default browser styling makes each level smaller. Choosing `h4` because `h3` is too large is the single most common cause of a broken hierarchy, and CSS solves it properly.
Components written independently and combined on one page, each starting its headings at a level that made sense in isolation.
Content management systems whose editors expose heading levels as style names, so authors pick them visually.
Templates that wrap content in a section already headed by an `h2`, so the author's own `h2` becomes a sibling instead of a child.
Who it affects
Screen reader users navigate by heading constantly, and most screen readers offer a list of the page's headings as a table of contents. A broken hierarchy produces a nonsensical one.
WCAG success criterion 1.3.1 requires that structure conveyed visually is also available programmatically, which is what headings do.
Search engines use headings as one signal among many about what a page covers, though the effect is far smaller than the accessibility one.
Anyone extracting content — a reader mode, a summariser, a translation tool — relies on the same structure.
How to check it
Extract the headings in order and read the levels as a sequence. Any jump downward of more than one level is a skip.
`curl -s https://example.com/page | grep -o '<h[1-6][^>]*>'` gives the sequence from the served HTML.
Browser extensions and the accessibility panel of the developer tools both present the heading outline directly, which is faster for one page.
Check that no heading is empty, and that no heading exists only to style a line of text that is not actually a heading.
Frequently asked questions
- Is it wrong to skip from h2 to h4?
- It breaks the structure a screen reader presents. Use the correct level and style it with CSS if the default size is wrong.
- Do heading levels affect SEO?
- They are a minor signal about page structure. The substantial cost of a broken hierarchy is to accessibility, not to ranking.
- Can headings restart inside a section?
- No. Heading levels are global to the document. The sectioning outline that would have allowed this was never implemented and has been removed from the specification.
Sources
Related
VeriFixScan crawls a site and applies its checks to every page it reaches, keeping the evidence behind each finding. Scanning one website is free.
Scan a website