<section>

<section> groups a thematic part of a document when a more specific element does not fit. It usually has a heading that tells readers what that part is about.

Two parts of a guide

Each section introduces a different topic beneath the page’s heading. The heading ranks are explicit; nesting does not recalculate them.

<main>
  <h1>Plan a small garden</h1>
  <section aria-labelledby="light-title">
    <h2 id="light-title">Find the light</h2>
    <p>Observe the space at several times of day.</p>
  </section>
  <section aria-labelledby="water-title">
    <h2 id="water-title">Plan for watering</h2>
    <p>Keep containers within easy reach.</p>
  </section>
</main>

section {
  border-top: 1px solid #94a3b8;
  margin-top: 1rem;
}

Semantics and accessibility

A section accepts flow content. With an accessible name, such as the referenced visible heading above, it can expose a region landmark. Do not turn every small wrapper into a named landmark; too many regions make navigation harder.

A heading is normally appropriate, but specialized interface sections can have a different structure. Do not add an empty heading solely to justify a section wrapper.

Choose deliberately

Use article for an independent composition, nav for major navigation, aside for supplementary content, and div for a CSS wrapper with no section meaning.

Remove the example’s CSS and inspect the heading list. The two sections remain understandable because their structure does not depend on borders.

Sources and browser support

MDN: section describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.