How to Fix Heading Hierarchy Issues

What is this?

Heading hierarchy means using HTML heading tags (<h1> through <h6>) in a logical, sequential order. A page should have one <h1>, followed by <h2> sections, with <h3> subsections, and so on. Skipping levels (e.g., <h1> followed by <h4>) confuses assistive technologies.

Why it matters

• Accessibility: Screen reader users navigate by headings. A broken hierarchy makes it difficult to understand page structure.
• SEO: Search engines use headings to understand content structure and topic relevance
• Readability: A clear heading hierarchy helps all users scan and understand your content

How to fix it

Correct hierarchy example

<h1>Product Catalog</h1>             <!-- One per page -->
  <h2>Electronics</h2>               <!-- Main sections -->
    <h3>Laptops</h3>                 <!-- Subsections -->
      <h4>Budget Laptops</h4>        <!-- Sub-subsections -->
    <h3>Phones</h3>
  <h2>Clothing</h2>
    <h3>Men's Wear</h3>
    <h3>Women's Wear</h3>

Common violations and fixes

Skipped levels:

<!-- Bad: h1 → h4 (skipped h2 and h3) -->
<h1>About Us</h1>
<h4>Our History</h4>

<!-- Good: h1 → h2 -->
<h1>About Us</h1>
<h2>Our History</h2>

Multiple h1 tags:

<!-- Bad: two h1 elements -->
<h1>Welcome</h1>
<h1>Our Products</h1>

<!-- Good: one h1, sections as h2 -->
<h1>Welcome to Acme Corp</h1>
<h2>Our Products</h2>

Using headings for styling:

<!-- Bad: using h3 because it looks smaller -->
<h3>Fine print disclaimer</h3>

<!-- Good: use CSS for visual styling -->
<p class="text-sm text-gray-500">Fine print disclaimer</p>

Common mistakes

• Using heading tags for visual styling instead of semantic structure. Use CSS classes for appearance.
• Having no <h1> on the page. Every page should have exactly one <h1>.
• Placing the site name in an <h1> on every page. The <h1> should describe the specific page content.

Test your fix

After correcting your heading hierarchy, audit your site on BeaverCheck to verify in the Accessibility tab.