Empty heading.

Headings play a critical role in structuring a web page. They create an outline of the document that both users and machines rely on. Screen readers, for example, allow users to navigate a page by jumping between headings, making them one of the most important tools for accessible navigation. When a heading is empty, screen readers may announce “heading level 2” (or similar) with no accompanying text, leaving users confused about what section they’ve entered.

Empty headings also signal a structural problem. They often appear when developers use heading elements purely for spacing or styling purposes, when content is meant to be injected dynamically via JavaScript but the script fails, or when headings are left as placeholders during development and never filled in.

The W3C validator flags this as a warning because the HTML specification states that headings represent the topic of their section. An empty heading cannot fulfill this purpose. While it is technically parseable HTML, it is semantically meaningless and degrades the quality of the document.

How to fix it

• Add descriptive text to the heading that accurately represents the content of its section.
• Remove the empty heading if it serves no purpose. Don’t keep empty headings as spacers — use CSS margins or padding instead.
• If content is loaded dynamically, consider adding the heading element via JavaScript at the same time as its content, rather than leaving an empty shell in the markup.
• If you’re hiding the heading visually but still want it available for screen readers, use a visually-hidden CSS technique rather than leaving it empty.

Examples

❌ Empty headings (triggers the warning)

<h1></h1>

<h2> </h2>

<h3>
</h3>

All three of these are considered empty — even the ones containing whitespace or a newline.

❌ Using an empty heading for spacing

<h2></h2>
<p>This paragraph needs some space above it.</p>

This misuses a heading element for visual layout purposes.

✅ Heading with meaningful content

<h1>Welcome to Our Store</h1>

<h2>Featured Products</h2>
<p>Check out our latest arrivals.</p>

✅ Using CSS for spacing instead of empty headings

<p class="section-intro">This paragraph needs some space above it.</p>

.section-intro {
  margin-top: 2rem;
}

✅ Visually hidden heading for screen readers

If you need a heading that is available to assistive technologies but not visible on screen, include text and hide it with CSS:

<h2 class="visually-hidden">Navigation Menu</h2>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

✅ Adding headings dynamically with their content

Instead of placing an empty heading in the HTML and populating it later, create the heading along with its content:

<div id="results"></div>

<script>
  const container = document.getElementById("results");
  const heading = document.createElement("h2");
  heading.textContent = "Search Results";
  container.appendChild(heading);
</script>

This approach avoids any moment where an empty heading exists in the DOM, ensuring validity and accessibility at all times.

Learn more:

MDN Reference

Heading elements - HTML

→

WHATWG Spec

Sections - WHATWG HTML Standard

→

web.dev Article

Headings and sections

→