FeaturesPricingAudit GuideFree StatementDashboard →

Fix Heading Hierarchy and Structure

Learn how to use proper heading hierarchy (H1-H6) for accessibility and SEO. Includes code examples and best practices.

6 min read
serious severityWCAG Level AWCAG 2.1 Success Criterion 1.3.1 and 2.4.10Auto-detectable

What Is It?

Heading hierarchy is the nested structure of h1, h2, h3, etc. tags. Proper structure: H1 (page title) -> H2 (section headings) -> H3 (subsection headings), etc. Don't skip levels.

Affected users: Screen reader users, users with cognitive disabilities, users with attention disorders, search engines, users scanning pages

Why It Matters

Screen reader users use heading navigation to understand page structure and jump between sections. Search engines use heading hierarchy to understand content importance. Poor heading structure confuses both.

Good news: Automated tools can detect heading level skips and multiple H1s. Ensuring meaningful, logically organized headings requires manual review.

How to Detect This Issue

Test with screen reader heading list. Check if headings follow logical order (no skipping H2 to H4). Verify H1 exists and is unique per page. Use automated heading checker tools.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<h1>Product Page</h1>\n<h3>Features</h3>\n<h1>Customer Reviews</h1>
After (accessible)
<h1>Red Leather Wallet</h1>\n<h2>Features</h2>\n<h3>Durability</h3>\n<h3>Design</h3>\n<h2>Customer Reviews</h2>

Proper hierarchy: one H1 per page, followed by H2 sections, H3 subsections. Don't skip levels. Organize from most important to least important.

React / Next.js

Before
<div className="heading">Section Title</div>
After
<h2>Section Title</h2>

Use semantic heading elements, not styled divs. Screen readers don't understand <div> as heading. Style <h2> with CSS instead.

WordPress

Before
Title set as text in page builder, sections as bold text, no heading tags
After
Page title set as H1 (via page editor), section titles as H2 (via text block heading), subsections as H3

WordPress: use Paragraph block with Heading style selector. Default page title is H1. Ensure heading hierarchy in page content.

Shopify Liquid

Before
Product name in <span> with CSS styling, sections using <b> or <strong> tags
After
Product name in <h1>, section titles in <h2>, using semantic heading tags in liquid template

Shopify liquid: use heading tags in sections. Edit section HTML to replace styled divs with proper <h1>, <h2>, <h3> elements.

Common Mistakes

✗

Skipping heading levels (H1 -> H3 skips H2)

✗

Multiple H1 tags on same page (should be exactly one)

✗

Using headings for styling rather than structure (H3 used because it looks good, not because it's a subsection)

✗

Headings that don't describe content (e.g., <h2>Learn More</h2> tells you nothing about the section)

✗

Heading structure doesn't match visual structure (confuses users)

Frequently Asked Questions

How many H1 tags should a page have?
Exactly one. The H1 is the main page title. Use H2 for section headings. Some sources say multiple H1s are OK, but one H1 is clearest for screen readers.
Should I use heading tags for styling?
No. Use CSS to style headings. If an element needs to look like a heading but isn't semantically one, use semantic HTML and style it. <button> styled as h2 is still a button.
What if my design requires headings in a certain visual size?
Use CSS to style headings any size you want. A <h2> can be visually smaller than an <h3>. Semantic meaning and visual appearance should be independent.
Is heading structure important for SEO?
Yes. Search engines use heading structure to understand page topics and content organization. Proper hierarchy improves search visibility and CTR.

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides