Heading Structure

Heading structure is the hierarchy of <h1> through <h6> tags that turns a page into an outline: one H1 for the topic, H2s for major sections, H3s nested beneath them. It is the skeleton screen readers navigate by and search engines use to figure out which section answers which query — so a broken hierarchy quietly costs you both accessibility and snippet eligibility at the same time.

Good outline vs. broken outline

Strip away the styling and every page has an outline. Here is a healthy one from a guide about espresso machines:

H1  Espresso Machines for Small Kitchens: A Buyer's Guide
  H2  How much counter space do you actually need?
  H2  Manual vs. super-automatic machines
    H3  What you give up with super-automatics
    H3  Maintenance differences
  H2  Five machines under 12 inches wide
  H2  FAQ

And here is the broken version I find on real sites every damn week:

H1  (empty — theme printed the tag, nobody filled it)
  H4  Espresso Machines for Small Kitchens   ← styled "because it looked right"
  H2  Welcome to Our Blog                    ← sidebar widget heading
    H6  Manual vs. super-automatic           ← skipped H3–H5 entirely
  H2  Subscribe to our newsletter            ← footer CTA in the outline

Both pages might look identical in a browser, because CSS hides all of this. The second one is only broken in the markup — which is exactly where screen readers and crawlers live.

Heading misuse and what it actually costs

The one rule that prevents most of it

Headings describe structure; CSS controls appearance. Every violation in that table comes from mixing the two — picking a tag for its size, or styling text instead of marking it up. If a design calls for a smaller H2, restyle the H2. The markup should still read as a sane outline when every stylesheet is deleted, because for a screen reader and a crawler, it effectively is.

How to check it on your own site

1. Run a page through our heading structure analyzer — it extracts the outline and flags skips, empties, and multiple H1s in one pass.
2. Install the HeadingsMap extension (Chrome/Firefox) and open your five most important templates. You are looking at the exact tree screen-reader users navigate.
3. Crawl the site with Screaming Frog: the H1 and H2 tabs plus the "Missing" filters expose template-wide problems, which is where most heading damage lives — one broken template, thousands of broken pages.
4. Check heading order programmatically: in DevTools run document.querySelectorAll('h1,h2,h3,h4,h5,h6') and read the sequence. Any level jumping more than one step down is a skip.
5. Listen to one page with VoiceOver (Cmd+F5 on a Mac, then navigate by headings). Five minutes of this teaches you more about heading structure than any checklist.

Common audit mistakes

• Auditing the post body while ignoring the template. The theme's sidebar, footer, and cookie banner headings are part of the same outline. Most "weird heading order" findings trace to widgets, not writers.
• Demanding a perfect H1→H2→H3 cascade as a ranking fix. Google has been clear that heading order is not a meaningful ranking lever — background in Google clarifies H1–H6 headings for SEO. Sell the fix on accessibility, maintainability, and snippet eligibility, which are the honest reasons.
• Fixing skips by renumbering instead of restructuring. Mechanically bumping every H4 to H3 satisfies the tool while leaving a mislabeled outline. First ask what the section actually is; then give it the level that matches.
• Writing headings as decoration ("A Few Thoughts", "More Info"). Every heading is a query-shaped label for the section beneath it. Vague headings waste the strongest section-level signal a page has.
• Treating the H1 as the whole job. One good H1 over a flat wall of unstructured text still fails scanners and screen readers alike. The H1 has its own set of failure modes — covered in H1 tag.

FAQ

Do heading tags directly improve rankings?

Headings help Google understand what each section covers, which supports passage ranking and featured snippets, but a tidy cascade is not a ranking boost by itself. Structure is understanding, not points.

How many H2s can a page have?

As many as it has major sections. A 3,000-word guide might carry eight; a short glossary entry two or three. The count is an output of the content's structure, not a target.

Is skipping from H2 to H4 really a problem?

For rankings, marginal. For screen-reader users, it breaks the nesting they navigate by, and it usually signals someone picked the tag for its font size — which means the whole outline is suspect.

Should sidebar and footer headings use heading tags at all?

Ideally they are real headings at a sensible level (or marked up as navigation landmarks), so they don't masquerade as content sections. What you never want is a widget H2 outranking your article's actual sections in the outline.

Can I style a heading to look smaller than its level?

Yes — that is exactly what CSS is for. Level is meaning; size is presentation. Choose the level by structure, then style it however the design needs.