The basics of heading hierarchy

I realized recently that I’ve not written much about headings in this newsletter. That’s surprising considering how fundamental they are to accessibility. So I’m making up for it with a three-part series on heading structure, hierarchy, and common mistakes.

Screen reader users rely on proper heading structure to build a mental outline of the page. If your headings skip from H2 to H4, or aren’t marked up correctly, that outline breaks.

What heading hierarchy means

Headings create a nested structure, like a book’s table of contents. H1 is the page title, the top-level. H2s are major sections, like chapters. H3s are subsections within those H2s. H4s are subsections of H3s. Each level represents a child of the level above it.

<h1>Annual Report 2024</h1>
  <h2>Financial Overview</h2>
    <h3>Revenue</h3>
    <h3>Expenses</h3>
  <h2>Future Goals</h2>
    <h3>Expansion Plans</h3>

This structure communicates relationships. Revenue and Expenses are both part of the Financial Overview. Future Goals is a separate major section at the same level as Financial Overview.

The one H1 rule

One H1 per page. It’s the page title, the main topic. Not the site name unless you’re on the homepage. Multiple H1s create a flat, meaningless structure that provides no hierarchy at all.

Don’t skip levels going down

Going from H2 directly to H4 skips H3, which breaks the hierarchy. Screen reader users navigating by headings will wonder what happened to the H3 level. You can skip levels going back up (H4 to H2 is fine, because you’re closing a subsection and starting a new major section).

Headings vs styled text

Making text bold and bigger doesn’t make it a heading. Screen readers only recognize actual heading elements (H1 through H6).

Headings create the backbone of your page structure. For screen reader users, they’re the primary navigation tool. Get the hierarchy right, and you make your content scannable for everyone.

Stay tuned for Part 2, where we’ll dive into when you should skip heading levels and what happens when headings don’t match visual importance.