Heading levels skip: fix your heading hierarchy

What it means

Heading levels skip a level when a page jumps from, say, an h2 to an h4 without an intervening h3, or when a styled div is used as a heading instead of a real heading element. This breaks the expected h1 through h6 hierarchy on the page.

Why it matters

Skipped heading levels distort the semantic tree that Googlebot and screen readers both consume. Since headings are explicit topic and structure signals, gaps make it harder for the crawler to infer content priority and for AI extractors to identify the correct heading hierarchy. The issue also affects snippet eligibility and internal linking context.

How to fix it

1. Replace styled divs or spans with real heading elements (h1–h6) in the HTML source.
2. Ensure each heading level is used in order without gaps: h1, h2, h3, etc.
3. Use CSS to control visual size and weight independently of the semantic level.
4. Verify with axe DevTools or Lighthouse that headings report no skipped levels.

Example

<h1>Guide</h1>
<h4>Getting Started</h4>

<h1>Guide</h1>
<h2>Getting Started</h2>

Don't jump from h1 to h4. Use CSS for size; keep the heading levels sequential so the outline is well-formed.

When it's not a problem

This is a false alarm when the visual style suggests a skip but the actual HTML uses the correct heading element in sequence. It's also fine if the design intentionally uses a larger font for an h4 but the markup is correct.

How Crawlinx detects it

We read the heading outline (h1–h6) in document order and report the first place it jumps down more than one level (e.g. h2 followed by h4) — the same check axe-core and Lighthouse run.

How common is it?

10583 audited sites in our corpus currently show this issue. The breakdowns below show which platforms, gatekeepers, verticals and countries are most exposed.