Heading Level Skips: How to Fix Heading Hierarchy

What "Heading level skips" flags

This check fires when your headings jump a level on the way down — an <h1> followed by an <h3> with no <h2> between them, or an <h2> that drops straight to an <h4>. The heading text is there; the problem is the hierarchy. The stakes are structural: assistive tech builds a navigable outline from heading levels, and a gap tells a screen-reader user a subsection exists where none does, while search engines lose the parent-child map of your content.

A real example: the broken jump vs. the fix

Here is the pattern the check catches — a designer wanted smaller text, grabbed the tag whose default styling looked right, and skipped a level:

<!-- Flagged: h1 jumps to h3, no h2 exists -->
<h1>2026 Pricing Guide</h1>
<h3>Starter Plan</h3>      ← where did h2 go?
<h3>Pro Plan</h3>
<h4>Add-ons</h4>

The fix is to renumber for meaning, not appearance, then style with CSS. Each level should descend by exactly one:

<!-- Fixed: every step down is one level -->
<h1>2026 Pricing Guide</h1>
<h2>Plans</h2>
<h3>Starter Plan</h3>
<h3>Pro Plan</h3>
<h4>Add-ons</h4>

<style>
/* Want a small h2? Style it. Don't skip to h3. */
h2.compact { font-size: 1.1rem; font-weight: 600; }
</style>

Note the rule: you may climb back up any number of levels (an <h4> can be followed by an <h2> to start a new top section), but you may only step down one level at a time.

Which sequences pass and which skip

How to detect it on your own site

1. Lighthouse: DevTools → Lighthouse → Accessibility. The audit "Heading elements are not in a sequentially-descending order" pinpoints each skip with the offending node.
2. PageSpeed Insights: Run the URL through PageSpeed Insights and read the Accessibility section for the same finding.
3. DevTools console: Print the raw outline and eyeball the gaps:

   [...document.querySelectorAll('h1,h2,h3,h4,h5,h6')]
     .forEach(h => console.log(h.tagName, '—', h.textContent.trim()));

4. Heading analyzer: Paste your URL into the Heading Structure Analyzer for a visual tree that makes skips obvious.
5. View Source: For a static page, a quick read of the source in order shows whether levels descend cleanly.

Why hierarchy carries meaning, not just style

Heading levels are the outline of your document, and an outline only works if the indentation is consistent. When a screen-reader user pulls up the heading list to navigate — the equivalent of glancing at a table of contents — a skip from h1 to h3 implies there is a missing h2 subsection, so the reader is left wondering whether content was skipped or the page is malformed. The nesting is supposed to answer "is this a sibling of the last section, a child of it, or the start of something new," and a level jump makes that unanswerable.

Search engines lean on the same structure to understand relationships between blocks of content. A properly nested outline tells a crawler that "Starter Plan" and "Pro Plan" are subsections under "Plans," which sits under the page's h1. Skip the h2 and that parent-child map breaks — the crawler sees two h3s floating with no parent, and the topical grouping you intended is lost. None of this is a dramatic ranking lever on its own, but it is part of the baseline structural hygiene that separates a page a machine can confidently parse from one it has to guess at.

How to fix it

1. Renumber by meaning. Assign levels based on the logical nesting of sections, ignoring how big or bold each tag looks by default.
2. Move sizing to CSS. If you skipped a level only to get smaller text, keep the correct tag and restyle it with a class.
3. Fill the gap. Where a real subsection was missing its parent, add the intermediate heading that was implied but never written.
4. Fix widget defaults. Page-builder blocks often default to h3 or h4 — set each block to the level its position demands.
5. Start at h1. Ensure the page opens with a single h1 before any deeper level appears.

Common mistakes

The number one mistake is treating heading tags as font-size presets — grabbing h4 because "it's the right size." Size is CSS's job; the tag encodes structure. Another is over-correcting by making everything an h2 to avoid skips, which flattens the outline and loses the nesting entirely. And do not confuse this with empty headings: a skip has text but wrong levels; an empty heading has correct levels but no text.

Frequently asked questions

Does a heading skip hurt rankings?

Not as a direct penalty, but it muddies the content structure Google parses and weakens accessibility, an area that increasingly overlaps with page quality. A clean outline is a low-cost quality signal.

Can I skip levels going back up?

Yes. Descending must be one level at a time, but you can jump up freely — an h4 followed by an h2 to begin a new major section is perfectly valid.

Is it fine to have multiple h2s and h3s?

Absolutely. Repeating a level is expected; siblings share a level. The rule only governs how you descend to a deeper level.

How is this different from missing heading hierarchy?

They are close cousins. A skip is one specific hierarchy defect; the broader topic of building a correct outline is covered in how to structure headings for SEO and the heading structure reference.

My theme hardcodes the skip. What do I do?

Edit the template to emit the correct level, or use a child theme to override it. Restyling with CSS to fake the old look is fine — changing the actual tag level is what matters.