Heading Structure – The Hidden Navigation System of Your Web Pages

Publication Date: 06/28/2024

Imagine trying to navigate a book with no chapter titles, section breaks, or table of contents. That’s what many users experience when websites lack proper heading structure. For the millions of people who use screen readers, headings aren’t just formatting – they’re the primary way to navigate and understand your content.

Why Heading Structure Matters

Screen reader users often navigate by headings, jumping from H1 to H2 to H3 like you might scan a newspaper. In fact, WebAIM’s screen reader survey found that 67% of users navigate by headings as their first strategy for finding information.

The Heading Hierarchy Rules

Think of headings like an outline:

H1: Your Main Topic (Only one per page)

• H2: Major Section 
• H3: Subsection 
• H4: Sub-subsection 
• H5: Minor subsection 
• H6: Smallest subsection

Common Mistakes Content Editors Make

1. Skipping Heading Levels

❌ Wrong:

H1: Welcome to Our Campus

H4: Dining Options  (Skipped H2 and H3!)

✅ Correct:

H1: Welcome to Our Campus

H2: Dining Options

2. Using Headings for Styling Don’t choose H3 because it “looks better.” Use CSS to style headings while maintaining logical structure.

3. Multiple H1s Each page should have exactly one H1 that describes the main content.

Practical Examples

Blog Post Structure:

H1: "10 Tips for First-Year Students"

H2: "Academic Success"

H3: "Time Management"

H3: "Study Strategies"

H2: "Campus Life"

H3: "Getting Involved"

H3: "Making Friends"

H2: "Health and Wellness"

Event Page Structure:

H1: "Spring Career Fair 2024"

H2: "Event Details"

H2: "Participating Employers"

H3: "Technology Companies"

H3: "Healthcare Organizations"

H3: "Non-Profit Organizations"

H2: "How to Prepare"

Testing Your Heading Structure

Method 1: Use Browser Tools Most browsers let you view heading structure:

1. Right-click → Inspect
2. Search for “h1”, “h2”, etc.
3. Check the logical flow

Method 2: The Squint Test If you squint at your page and can still follow the content flow through headings alone, you’re on the right track.

Method 3: Screen Reader Simulation Try navigating your page using only Tab key and screen reader shortcuts (H key in NVDA/JAWS jumps between headings).

Quick Fixes for Existing Content

1. Audit your H1s – Ensure each page has exactly one H1
2. Check for skipped levels – If you have H1 followed by H3, add an H2
3. Review heading text – Make sure headings are descriptive, not just “More Information”

Content Editor Checklist

Before publishing any page:

• [ ] Page has exactly one H1
• [ ] Headings follow logical order (no skipped levels)
• [ ] Headings accurately describe their sections
• [ ] I can understand the page structure from headings alone

The Business Case

Proper heading structure isn’t just about accessibility – it helps with SEO too. Search engines use heading structure to understand your content, and users scan headings to decide if they want to read your page.

Good heading structure creates a win-win: better accessibility, better SEO, and better user experience for everyone.