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.