How to fix your heading hierarchy

Headings (H1 through H6) create a document outline. Search engines read that outline to understand how a page's ideas are organized, and screen-reader users navigate by it — jumping heading to heading the way a sighted reader skims.

The rule is simple: one H1 for the page title, then nest downward in order — H2 for main sections, H3 for sub-points — without skipping a level for visual effect.

Why it matters

A logical heading order helps search engines grasp the structure and relative importance of your content, and it's a core accessibility requirement — screen readers announce heading levels, so a skipped level (H2 → H4) genuinely disorients a blind user. Sites that pick heading tags for their font size instead of their meaning break both at once.

How to tell if this is you

Abby flags “Heading Hierarchy” when levels are skipped (e.g. an H2 followed by an H4), when there is no H1, or when headings are used out of order. The fix is to choose heading levels by meaning and style them with CSS.

The fix

Use headings in sequential order (H1 > H2 > H3, etc.). Don't skip levels (e.g., H1 directly to H3). Headings create a document outline for search engines.

Before

<h1>Our Services</h1>
<h4>Plumbing</h4>       <!-- skips H2 and H3 -->
<h4>Electrical</h4>

After

<h1>Our Services</h1>
<h2>Plumbing</h2>      <!-- next level down -->
<h2>Electrical</h2>
<h3>Emergency callouts</h3>  <!-- sub-point of Electrical -->

Fix it on your platform

When this doesn’t apply

Critical for long-form content (articles, documentation, knowledge bases). Less relevant for app interfaces, dashboards, and aggregator feeds where each item is its own visual unit and prose hierarchy doesn't apply.

FAQ