Français

<section>

Splitting a page into titled parts, and the difference with <article>

— 1 min read

  • HTML
  • accessibility
  • semantics
  • structure

<section> — The thematic section

The <section> element groups a block of thematically related content, usually introduced by a heading. It is not a generic container: if you have no heading for it, you probably want a <div>.

When to use it

You want to split a long page into thematic blocks: chapters of an article, tabs on a product page, sections of a landing page. Each <section> should have an <h2>-<h6>.

What you gain

Accessibility: with a heading, each <section> becomes a navigable region. Screen readers list sections and let users jump between them.

Code example

<main>
  <h1>Running shoes</h1>
  <section>
    <h2>Features</h2>
    <p>Lightweight mesh upper with reinforced sole.</p>
  </section>
  <section>
    <h2>Reviews</h2>
    <article><!-- individual review --></article>
  </section>
</main>

Further reading