Empty Heading Tags
Heading elements (<h1> through <h6>) define the document outline. An empty heading creates a gap in the page structure, confuses screen readers (which announce it as a heading with no content), and wastes SEO potential.
Why It Matters
Empty headings confuse screen reader users who navigate by headings. Search engines use headings to understand page structure — empty headings dilute your heading hierarchy. They typically result from headings styled with CSS background images instead of text.
Code Examples
<h2 class="section-icon"></h2> <h3></h3>
<h2 class="section-icon">Our Features</h2> <!-- Or remove the heading entirely if it's decorative -->
How to Fix
- 1Add meaningful text content to every heading element.
- 2If the heading is purely decorative, remove the heading tag and use a <div> or <span> instead.
- 3If using icon fonts or SVG in headings, include visible or screen-reader-only text.
- 4Use aria-label as a last resort if you truly can't add visible text.
Check Your HTML Now
Our validator detects this error automatically and shows the exact line number.
Open HTML ValidatorHostinger — Fast & Affordable Web Hosting
Deploy clean, validated HTML on reliable hosting.
Related HTML Errors
Heading Level Skip
Why skipping heading levels (h1 to h3) hurts accessibility. Learn the correct heading hierarchy for SEO and screen readers.
Missing Alt Attribute on Images
Learn why every img element needs an alt attribute and how to write good alt text for accessibility and SEO.
Duplicate ID Attributes
Why duplicate IDs break JavaScript and accessibility. Learn how to find and fix duplicate id attributes in your HTML.