Empty Headings: How to Fix Them

What "Empty Headings" actually flags

This check fires when a heading tag — an <h1> through <h6> — ships to the browser with no readable text inside it. The markup exists in the DOM, but a screen reader or a crawler that walks the heading outline lands on a node that announces nothing. The stakes are quiet but real: empty headings break the document outline that assistive tech and search engines rely on to understand page structure, and they can trip accessibility audits that block a Lighthouse pass.

A real example, and the fix

The classic offender is a heading kept in the markup purely as a styling or spacing hook, with the visible text living in a sibling element:

<!-- Flagged: the h2 is a decorative container, text sits elsewhere -->
<h2 class="section-divider"></h2>
<div class="section-title">Our Pricing</div>

<!-- Also flagged: icon-only heading, no text node -->
<h3><i class="icon-star" aria-hidden="true"></i></h3>

The fix is to put the real words back inside the heading and move the styling to a class. If the graphic truly is decorative, demote it to a <div> so it stops pretending to be a heading:

<!-- Fixed: heading carries its own text -->
<h2 class="section-title">Our Pricing</h2>

<!-- Icon heading fixed: real text plus a hidden-but-readable label -->
<h3>
  <i class="icon-star" aria-hidden="true"></i>
  <span>Customer Favorites</span>
</h3>

One trap worth calling out: a heading that looks filled but only contains whitespace, a non-breaking space, or an image with no alt still counts as empty. <h2>&nbsp;</h2> is empty as far as the outline is concerned.

What counts as empty vs. what passes

How to detect it on your own site

1. Lighthouse: Open Chrome DevTools → Lighthouse → run an Accessibility audit. The "Heading elements are not in a sequentially-descending order" and "empty heading" items surface here with the exact node highlighted.
2. PageSpeed Insights: Run your URL through PageSpeed Insights and open the Accessibility section — empty headings are called out with a DOM snippet.
3. View Source / DevTools console: Paste this into the console to list every empty heading instantly:

   [...document.querySelectorAll('h1,h2,h3,h4,h5,h6')]
     .filter(h => !h.textContent.trim())
     .forEach(h => console.log(h.outerHTML));

4. Accessibility tree: In DevTools, open the Accessibility pane for a suspect heading — an empty one shows a blank "Name," which is the giveaway.

Why the outline matters more than it looks

Sighted users never see this problem — the page looks fine because the visible text lives somewhere. But a screen-reader user navigating by heading (a primary way blind users skim a page) hits your hollow node and hears "heading level 2" followed by silence, then has to guess whether they missed something or the site is broken. Multiply that across a template used on every page and you have a site-wide navigation defect that never shows up in a visual QA pass. Crawlers treat the heading outline as a table of contents for your content; a blank entry is a chapter title with no chapter, and it dilutes the topical signal the surrounding real headings are trying to send.

There is also a maintenance angle. Empty headings are almost always accidental — a leftover from a deleted section, a builder widget dragged in and never filled, a divider someone reached for the wrong tag to build. Each one is a small piece of rot in the template, and they accumulate. Clearing them keeps the markup honest, which pays off every time someone new has to reason about the page structure.

How to fix it

1. Put the text back. If a heading is a spacing or divider hack, add the real heading text and style it with CSS instead of leaving it hollow.
2. Demote decorative headings. A pure visual break that was never a real section title should be a <div> or <hr>, not a heading.
3. Label icon-only headings. Add a visible <span> or a visually-hidden text label so the heading has an accessible name.
4. Give images alt text. If a logo or graphic sits inside a heading, the alt attribute becomes the heading's text — fill it in.
5. Hunt the builder. Page builders love to inject empty heading widgets. Delete the orphaned block rather than hiding it with CSS.

Common mistakes

Do not "fix" an empty heading by slapping display:none on it — the node still exists in the DOM and still fails the check. Do not stuff it with a single   to silence a linter either; that is the exact pattern that got flagged. And resist the urge to keep an empty <h1> around "for SEO" — an empty top-level heading is worse than none, because it signals a title that was never written.

FAQ

Is an empty heading a ranking penalty?

No direct penalty, but it degrades the semantic structure Google uses to understand your page and can drag down accessibility scoring, which increasingly overlaps with quality signals. Fixing it is cheap insurance, not a gamble.

What is the difference between an empty heading and a heading level skip?

An empty heading has no text; a heading level skip has text but jumps levels (for example h2 straight to h4). One is a hollow node, the other is a broken hierarchy — they are separate checks with separate fixes.

Does a heading with only an icon count as empty?

Yes, if the icon has no accompanying text and no accessible label. Add a <span> with real words, or an aria-label, so the heading announces something.

My CMS auto-generated the empty heading. Now what?

Track down the block or widget in your builder and delete it. If a theme template hardcodes it, edit the template — hiding it with CSS leaves the failing node in place.

Where do empty headings fit in the bigger picture?

They are one piece of a healthy document outline. See our guide on how to structure headings for SEO and the heading structure reference for the full picture.