What Is Heading Hierarchy (and Why Yours Is Broken)

Jul 24, 2026 · SEO Glossary

Ask a designer why a page uses an <h4> in a section that should logically be an <h2>, and you'll usually get the same answer: "the H2 was too big." That single sentence explains most broken heading structures on the web. Headings got treated as a font-size menu, and the document outline — the actual point of the system — got destroyed in the name of typography.

What is heading hierarchy? It's the structured use of HTML heading tags (H1 through H6) so they form a logical outline of the page: one H1 stating the main topic, H2s for major sections, H3s for subsections within those, and so on. Think of it as the table of contents a book would have — chapters, sections, subsections — expressed in markup that both search engines and assistive technology can read.

What is heading hierarchy supposed to look like?

A well-structured article about, say, running shoes might outline like this:

• H1: How to Choose Running Shoes
• H2: Understanding Your Gait
  • H3: Overpronation
  • H3: Neutral Gait
• H2: Cushioning Types
• H2: When to Replace Your Shoes

Two rules generate that structure. First, levels nest: an H3 belongs inside an H2's section, never floating on its own. Second, don't skip downward — jumping from H2 straight to H5 leaves phantom levels that exist for no reason except that the H5 looked right visually. Moving back up (H3 back to H2 when a new major section starts) is normal and correct.

Who actually consumes this structure

Three audiences, and only one of them is Google:

1. Screen reader users. This is the big one, and it's not hypothetical. Surveys of screen reader users have consistently found that navigating by headings is their primary way to explore a page — they pull up a list of headings and jump directly to sections. A broken hierarchy turns that list into gibberish. For any client subject to accessibility requirements, heading structure is a compliance matter, not a style preference.
2. Search engines. Headings help Google segment your content into topics and subtopics, which feeds featured snippets — those extracted answers frequently come from a heading phrased as a question with a tight paragraph below it. Google is tolerant of messy structure, but tolerant isn't the same as indifferent: a clean outline makes it easier to match sections of your page to specific queries.
3. Skimming humans. Nobody reads web pages linearly. Visitors scan headings to decide whether the answer is here. Vague headings ("Learn More", "Why It Matters") fail this audience even when the markup is technically perfect.

The breakage patterns audits keep finding

When I crawl a typical small-business site, the heading report almost always shows some mix of these:

• Levels chosen by appearance. The H4-because-it-was-smaller problem. The fix is cultural, not technical: style headings with CSS classes so any level can look any size, and choose the tag by structure alone.
• Headings from the page builder lottery. Drag-and-drop builders let each widget set its own heading level, so a page assembled from six widgets ends up with an H1, three H2s, an H4, and an H6 in random order. Page builders are behind a disproportionate share of the broken outlines I see — the WordPress SEO guide covers this class of problem in more depth.
• Sidebar and footer noise. Widget titles like "Recent Posts" and "Categories" marked up as H2s or H3s, injecting navigation junk into every page's content outline.
• The missing or multiplied H1. Every hierarchy needs its root. Pages with no H1 tag, or with four of them, start the outline broken before the first subsection.

Repairing a site's headings without a rebuild

You don't need to touch every page on day one. The efficient sequence: crawl the site to get every page's heading structure in one report — a site audit surfaces missing H1s, skipped levels, and empty headings across the whole site at once — then fix templates before individual pages, because a template fix repairs hundreds of URLs in one edit. Prioritize the pages that earn revenue and the ones competing for featured snippets. For new content, make the outline part of the writing process: draft the headings first as a skeleton, and the hierarchy takes care of itself.

A concrete before-and-after

To make this less abstract: a SaaS pricing page I audited had this outline — H1 "Pricing", then H4 "Starter", H4 "Pro", H4 "Enterprise" (the designer's font-size choice), then an H2 "FAQ" with each question as bold paragraph text. Screen reader users heard three orphaned H4s under nothing, and none of the FAQ questions existed as navigable structure. The repaired version: H1 "Pricing", H2 "Plans" with each tier as an H3, H2 "Frequently Asked Questions" with each question as an H3. Same visual design, ten minutes of template work — and within a month two of those FAQ questions were being pulled into "People also ask" results.

One heading habit that pays for itself

Write headings that carry information on their own. "Pricing" is fine; "What a Site Audit Costs (and What's Included)" is better — it answers a scanner, it can match a real query, and it works in a screen reader's heading list without surrounding context. If someone read only your headings, they should come away knowing what the page argues. That test catches vague structure faster than any validator.