I free-audit a couple of "roast my website" posts a week. Most of the time the interesting finding is a performance number. This week it was something else: a page where the largest, most important sentence on the entire homepage wasn't marked up as a heading at all.
Not a missing <h1>. Not a skipped heading level. The actual hero line - the one in 48px type that says what the product does - was a plain <div>. The only <h1> on the page was a small uppercase label floating above it, styled like a tiny category tag.
To a sighted visitor, the hierarchy reads perfectly: small label, then big headline. To a screen reader or a search crawler, the hierarchy is inverted - the thing that gets first-class semantic weight is the label, and the actual headline is invisible structure, just text in a div.
Why this happens
I've now seen this exact pattern on three unrelated sites in the same week, so it's worth naming the cause instead of treating it as a one-off typo.
Design systems separate "what looks big" from "what's semantically first." A common layout pattern is: small uppercase eyebrow text above a large display headline. Somewhere in implementation, whichever element the developer reached for first - usually the smaller one, because it's simpler markup - gets the <h1>, and the big display text gets styled as a <div> or <p> (or a lower heading level) because by the time it's built, "the heading" already exists on the page.
It's an easy mistake to make precisely because the page looks right. Nothing renders broken. Lighthouse's automated accessibility checks don't reliably catch it either, because they check for the presence of a well-formed heading structure, not whether the heading you have is the sentence a human would actually call "the headline."
I saw the same root cause on a second site this week - a small business site built on a visual website builder. Same shape: a short label had the <h1>, the actual sales headline sat in unmarked text below it. Different stack, same blind spot.
A third site made an even easier-to-miss version of it: the <h1> was the site's own brand name in the nav bar (three letters, one of them a logo mark), and the actual hero pitch - the sentence explaining what the product does and why it's different - was marked as an <h2> one level down. No visual bug at all; the nav logo has always looked like a nav logo. It's purely a markup choice nobody revisits once the page ships.
Why it actually matters
Two concrete costs, not theoretical ones:
-
SEO: search engines weight
<h1>content heavily as a page-topic signal. If your<h1>is "Website Monitoring" (three words, generic) and your real value proposition - the sentence that differentiates you from every competitor - lives in an unmarked div, you're handing the crawler your least useful sentence and hiding your best one. -
Accessibility: a screen reader user navigating by heading (a very common navigation pattern - jumping between
<h1>/<h2>/etc.) hears the small label and nothing that tells them what the product actually claims to do. The core pitch of the page is functionally invisible to them.
How to check your own site in under a minute
You don't need a crawler for this - a browser tab and view-source is enough:
- Open your homepage, view source (or DevTools -> Elements).
- Find the
<h1>tag. Read only that text out loud. - Now look at your hero section with fresh eyes: what's the biggest, most prominent sentence a visitor actually reads first?
- If the answer to 2 and 3 isn't the same text, your heading hierarchy doesn't match your visual hierarchy - and both your SEO and your accessibility are reading the wrong sentence as "the headline."
The fix is almost never a redesign. It's swapping which element carries the <h1> tag - a CSS-only change if your class names already control the visual size independent of the semantic tag.
This is the same kind of check I built into SEO Audit for Claude Code - it walks Claude through reading your rendered HTML for exactly this kind of mismatch between what a page shows and what it tells search engines and screen readers.
Top comments (0)