Heading Hierarchy

What is Heading Hierarchy?

Heading hierarchy is the structured ordering of HTML heading elements from <h1> (most important) to <h6> (least important). It creates a logical outline of your content, with main topics at higher levels and subtopics nested beneath.

Think of it like a document outline or table of contents – headings show the relationship between sections.

Why Heading Hierarchy Matters

Screen Reader Navigation

Screen reader users often navigate by headings, jumping between them to scan page content. Proper hierarchy makes this navigation logical and predictable.

Content Understanding

A clear hierarchy helps all users understand how content is organised and find what they need.

SEO Benefit

Search engines use heading structure to understand content hierarchy and topic importance.

WCAG Compliance

Proper heading hierarchy is a Level A accessibility requirement.

Heading Hierarchy Rules

Start with H1

Each page should have one <h1> that describes the main topic.

Don't Skip Levels

Move through levels sequentially: H1, then H2, then H3. Don't jump from H2 to H4.

Multiple Same-Level Headings

You can have multiple headings at the same level. For example, several H2 sections under one H1.

Nest Logically

H3 should be a subsection of the preceding H2. H4 should be under the preceding H3.

Example Hierarchy

<h1>Complete Guide to Dog Care</h1>
  <h2>Feeding Your Dog</h2>
    <h3>Puppy Nutrition</h3>
    <h3>Adult Dog Diet</h3>
    <h3>Senior Dog Needs</h3>
  <h2>Exercise Requirements</h2>
    <h3>Daily Walks</h3>
    <h3>Playtime Activities</h3>
  <h2>Health and Veterinary Care</h2>
    <h3>Vaccinations</h3>
    <h3>Common Health Issues</h3>

Common Mistakes

Choosing Headings for Size

Using <h4> because you want smaller text. Use CSS for styling, HTML for structure.

Multiple H1s

Most pages should have exactly one H1. Multiple H1s confuse the document structure.

Skipping Levels

Jumping from H2 to H4 breaks the logical outline.

Headings for Styling Only

Using headings on text that isn't actually a section heading just because you want it bold and large.

No Headings at All

Walls of text without headings are difficult to scan and navigate.

Testing Heading Hierarchy

Browser Extensions

Tools like HeadingsMap or WAVE show your heading structure visually.

Screen Reader Navigation

Try navigating your site by headings only to test the experience.

Document Outline

Ask: "If I extracted only headings, would they form a logical table of contents?"