How to Fix Heading Hierarchy Issues

What the heading hierarchy check tests

SiteCurl examines the heading tags (H1 through H6) on your page and checks whether they follow a logical order. Skipping levels, like going from H1 directly to H3, is flagged. Pages with multiple H1 tags or no H1 at all are also flagged.

Why it matters

Screen reader users navigate pages by jumping between headings. They hear a list like “Heading level 1: About Us. Heading level 2: Our Team. Heading level 3: Engineering.” This creates a mental outline of the page.

When you skip from H1 to H3, the user wonders what H2 section they missed. The outline has a gap that makes the page harder to understand without seeing it.

Search engines also use heading structure to understand content hierarchy. An H1 tells Google what the page is about. H2s define major sections. A clear hierarchy helps search engines match your page to relevant queries.

How to fix it

The rules

1. One H1 per page: The H1 is the page’s main title. Use it once.
2. No skipping levels: After H1, use H2 for main sections. Under each H2, use H3 for subsections. Under each H3, use H4. Do not jump from H2 to H4.
3. Headings describe content: Each heading should describe the section that follows it. Do not use headings for visual styling.

Correct example

<h1>Dog Training Guide</h1>
  <h2>Basic Commands</h2>
    <h3>Sit</h3>
    <h3>Stay</h3>
  <h2>Advanced Training</h2>
    <h3>Off-Leash Recall</h3>
    <h3>Agility Basics</h3>

Incorrect example

<h1>Dog Training Guide</h1>
  <h3>Basic Commands</h3>  <!-- Skipped H2 -->
    <h5>Sit</h5>           <!-- Skipped H4 -->
<h1>More Info</h1>         <!-- Second H1 -->

Do not use headings for styling

If you want text to look like a heading but it is not a section title, use CSS instead:

<!-- Wrong: using H3 for visual size -->
<h3>Free shipping on orders over $50</h3>

<!-- Right: styled span or div -->
<p class="text-xl font-bold">Free shipping on orders over $50</p>

CMS tips

In WordPress, the block editor shows heading levels in the toolbar. Make sure you are selecting the correct level, not just the size that looks right. In Squarespace, use the “Heading” block and select the appropriate level.

How to verify the fix

Install the HeadingsMap browser extension to see your heading outline at a glance. Run a SiteCurl scan to check heading hierarchy across all pages.

Related checks

Heading structure works alongside alt text and form labels as core accessibility requirements.

Start a free trial to audit heading hierarchy across your site.