<section>

Description

L’élément <section> regroupe un contenu ayant un thème commun. Chaque <section> devrait idéalement comporter un titre (<h2>–<h6>). Si un contenu peut être extrait indépendamment et être republié ailleurs, préférer <article>. Si le contenu est purement cosmétique, préférer <div>.

Syntaxe

<section>
  <h2>Titre de la section</h2>
  <p>Contenu thématiquement lié.</p>
</section>

Exemples

Sections d’une page d’accueil :

<main>
  <section>
    <h2>Nos produits</h2>
    <ul>…</ul>
  </section>
  <section>
    <h2>Témoignages</h2>
    <blockquote>…</blockquote>
  </section>
</main>

Chapitres d’un document :

<article>
  <h1>Guide CSS Grid</h1>
  <section>
    <h2>Introduction</h2>
    <p>…</p>
  </section>
  <section>
    <h2>Propriétés principales</h2>
    <p>…</p>
  </section>
</article>

Notes

<section> n’est pas <div> : <section> a une valeur sémantique et peut créer un landmark ARIA si elle possède un aria-label ou aria-labelledby. Utiliser <div> pour un regroupement purement stylistique.

Titre obligatoire en pratique : sans titre, les technologies d’assistance ne peuvent pas distinguer les sections entre elles. L’absence de titre n’est pas une erreur de validation, mais c’est une mauvaise pratique.