Use a clean heading hierarchy

What this check does

Parses every heading element on the page (h1–h6) in document order and verifies the levels descend without gaps. The check fails when an h4 appears before any h3, when two h1s sit on the same page, or when section depth jumps by more than one.

Why it matters

A clean outline matters in three places at once.

• Screen readers announce the heading level on each jump. A user who navigates by headings (a common pattern for non-sighted users) hears “heading level 2 — features, heading level 4 — pricing” and assumes a level 3 was missed. The page becomes unnavigable.
• Search engines still read the heading outline as a hint about topical structure. An h1 followed by five h3s with no h2 reads as a flat content blob instead of an organized article.
• AI extractors (ChatGPT browsing, Perplexity, Google AI Overviews) chunk content along heading boundaries when summarizing. A broken hierarchy produces chunks that span multiple topics, lowering citation quality.

How to fix it

Use exactly one h1 per page — typically the page title. Every subsequent heading goes down at most one level at a time:

<h1>Comparing wireless earbuds in 2026</h1>
  <h2>What we tested</h2>
    <h3>Audio quality</h3>
    <h3>Battery life</h3>
  <h2>Best overall: Sony WF-1000XM5</h2>
    <h3>Pros</h3>
    <h3>Cons</h3>

The visual-styling shortcut. Designers sometimes use <h4> because it “looks the right size.” Don’t — pick the level that fits the document outline, then style it with CSS. Tailwind: <h3 class="text-base font-semibold">.

WordPress / page builders. Most block editors (Gutenberg, Elementor) let you change a heading’s level independently of its style. Walk through the page once and re-tag each block.

Astro / Next.js / React. Build a small <Section> wrapper that increments a heading-level context, so reusable components don’t hard-code <h3> and break the outline when nested.

Audit yourself — paste the page URL into W3C’s HTML validator and look at the document outline preview, or run the headingsMap browser extension.

Frequently asked questions

Can I have two h1s on one page?

HTML5 technically allows multiple h1s inside <section> or <article> elements, but every assistive-tech vendor — and Google — still treats one h1 per page as the correct pattern. Stick with one. See the H1 tag page.

What about sidebars and widgets?

Headings inside <aside> or repeated layout regions also count toward the outline. Either drop them to <h3> so they nest under the main content, or wrap them in a landmark with its own heading scope.

Does this affect Lighthouse or accessibility scores?

Yes — heading-order is one of the axe-core rules Lighthouse runs. A broken hierarchy lowers your Lighthouse accessibility score directly.