Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

The <section> element defines a standalone thematic grouping within a document — think chapters, tabbed panels, or distinct parts of a page like “About Us” or “Contact.” According to the HTML specification, each <section> should generally include a heading that identifies its content. When a <section> lacks a heading, the validator raises this warning because the element isn’t being used as intended.

This matters for several reasons:

Accessibility. Screen readers and other assistive technologies use headings to build an outline of the page. When a user navigates by sections, the heading is what identifies each one. A <section> without a heading appears as an “untitled section” in the document outline, which makes it difficult or impossible for assistive technology users to understand the page structure or jump to the content they need.

Semantics. The whole purpose of <section> is to group related content under a common theme, and that theme should be labeled with a heading. If your content doesn’t need a heading, it may not be a true “section” in the semantic sense, and a <div> (which carries no semantic meaning) might be a better fit.

Document outline. Browsers and tools that generate document outlines rely on headings within sectioning elements. Missing headings create gaps in the outline, reducing the usefulness of the page structure.

How to fix it

You have three main options:

1. Add a heading — Place an <h2>–<h6> element at the beginning of the <section>. This is the preferred solution when the section genuinely represents a thematic block of content.

2. Use aria-label or aria-labelledby — If a visible heading doesn’t suit your design, you can label the section for assistive technologies using an ARIA attribute. This resolves the accessibility concern, though the validator may still show the warning.

3. Switch to <div> — If the content doesn’t represent a meaningful, identifiable section of the document, replace <section> with a <div>. There’s no expectation for a <div> to have a heading.

Examples

❌ Section without a heading

This triggers the warning because neither <section> has a heading:

<h1>All about guitars</h1>
<section>
  <p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
  <p>Analog, digital, portable...</p>
</section>

✅ Fixed: Adding headings to each section

<h1>All about guitars</h1>
<section>
  <h2>Guitar types</h2>
  <p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
  <h2>Amplifiers</h2>
  <p>Analog, digital, portable...</p>
</section>

✅ Fixed: Using aria-label when a visible heading isn’t appropriate

<section aria-label="Guitar types">
  <p>Acoustic, electric, classical... we have them all!</p>
</section>

✅ Fixed: Using aria-labelledby to reference an existing element

<section aria-labelledby="guitar-heading">
  <span id="guitar-heading" class="visually-hidden">Guitar types</span>
  <p>Acoustic, electric, classical... we have them all!</p>
</section>

✅ Fixed: Replacing with <div> when no section semantics are needed

If you’re only using the element as a styling wrapper and the content doesn’t form a distinct thematic group, use a <div> instead:

<h1>All about guitars</h1>
<div class="content-block">
  <p>Acoustic, electric, classical... we have them all!</p>
</div>
<div class="content-block">
  <p>Analog, digital, portable...</p>
</div>

As a general rule, reach for <section> when your content has a clear topic that deserves a heading, and use <div> when you need a generic container for layout or styling purposes.

Learn more:

MDN Reference

HTML Section Element

→

MDN Reference

HTML Heading Elements

→

web.dev Article

Headings and sections

→