Heading Hierarchy for Humans and Crawlers Alike

Before the web, when you wrote anything long, you started with an outline. Roman numerals for the major sections, letters underneath, numbers under those. The outline wasn’t decoration. It was the argument’s skeleton, and you could judge a paper by its outline alone: whether the sections were parallel, whether anything was orphaned, whether the nesting reflected which ideas contained which.

HTML headings are that outline, embedded in the document. H1 is the title, H2s are the Roman numerals, H3s nest inside H2s. This is not a metaphor I’m imposing; it is what the levels are for. And it means a page’s headings can be pulled out and read on their own as a table of contents. That extraction test is the whole discipline in one move. Strip away everything but the headings and read what’s left. If it reads like a coherent outline of the page, your hierarchy is right. If it reads like “Untitled, Why Choose Us, Untitled, Learn More,” it is wrong, no matter how good the page looks.

I say “looks” deliberately, because looking good is how heading hierarchy dies. Somewhere along the way, heading tags stopped being used for structure and started being used for font size. An H4 renders smaller than an H2 by default, so a developer who wants smaller text reaches for H4, regardless of where it sits in the outline. The page jumps from H1 straight to H4, or opens with an H3 because that’s the size the designer liked. Visually, nothing is wrong. Structurally, the outline now claims there are two levels of missing sections. It is a table of contents with phantom chapters. CSS was supposed to end this, since any tag can be styled to any size, but the habit outlived its cause. My scanner still flags skipped heading levels on a large share of the pages it audits, and when I look at the markup, it is almost always size-picking. The tag was chosen by eye.

Why does this matter, if humans see the rendered page and not the tags? Because two important kinds of readers see only the tags. The first is people using screen readers. Screen reader users overwhelmingly navigate by headings; the software lets them jump from heading to heading the way a sighted reader’s eye jumps between bold lines. For them, your heading structure is the page’s navigation. A skipped level is a staircase with a missing step, and a page whose headline is a styled div is a page with no staircase at all. The relevant accessibility guidance, in WCAG, asks that headings describe their sections and that structure conveyed visually also exist programmatically. In plain terms: whatever the design shows, the markup must say.

The second kind of reader is the crawler. A search engine parsing your page uses headings to understand its topical structure, which sections discuss what, which subtopics belong to which topics. This has grown more consequential, not less, as search has shifted from ranking whole pages toward extracting passages. When Google answers a query by quoting a section of your page, or an AI assistant summarizes your documentation, the boundaries of “a section” come substantially from your headings. A well-structured page hands the machine clean, labeled blocks. A flat page, or one styled with sized divs, hands it a haystack. You can watch this play out in featured snippets: the sites that win them tend to be the ones whose H2 literally poses the question and whose following paragraph answers it. The structure did the ranking work.

What strikes me is that these two audiences, the blind reader and the crawler, are the same audience in one respect: neither can see. Both consume the document as pure structure. And so heading hierarchy is one of those rare disciplines with no tradeoff in it. There is no tension between doing it for accessibility and doing it for SEO; the identical markup serves both, and it serves the sighted skimmer too, since your visual hierarchy comes out cleaner when it flows from real structure instead of ad hoc sizing. When GazeSite grades a page, heading problems surface in the Accessibility findings and the SEO findings at once, and this is not double counting. It is one defect with two victims.

The repair is mostly mechanical and worth doing in a particular order. First decide the outline, on paper if it helps, as if writing the table of contents for a small book. Then assign tags by nesting depth alone: the one page-level title is H1, its major sections H2, their subsections H3, never skipping downward. Then, separately and last, style them. If the design wants an H2 to be small and quiet, make it small and quiet in CSS; the tag records what the heading is, the style records how it looks, and the two are allowed to disagree. That separation was the founding idea of stylesheets, and headings are where it pays off most concretely.

The old teachers were right that you could grade a paper by its outline. The web just made the grading automatic. Machines read your outline every day, and they are literal-minded graders. It costs little to give them, and the readers who depend on them, an outline that tells the truth.