<section>
Découper une page en parties titrées, et la différence avec <article>
<section> — La section thématique
La balise <section> regroupe un bloc de contenu thématiquement lié, généralement introduit par un titre. Ce n'est pas un conteneur générique : si tu n'as pas de titre à lui donner, c'est probablement un <div>.
Quand l'utiliser
Tu veux découper une page longue en blocs thématiques : chapitres d'un article, onglets d'une page produit, sections d'une landing page. Chaque <section> devrait avoir un <h2>-<h6>.
Ce que tu gagnes
Accessibilité : avec un titre, chaque <section> devient une région navigable. Les lecteurs d'écran listent les sections et permettent de sauter de l'une à l'autre.
Exemple de code
<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>Pour aller plus loin
- Les soupes de div — remplacer les
<div>par des balises sémantiques - WHATWG —
<section> - W3C — ARIA region role
- MDN —
<section>