Docs HTML exécutables : Balise section

À quoi sert la balise section

<section> regroupe un contenu sur un même thème, et elle commence par un titre qui nomme ce thème. Une page d'accueil divisée en « Features », « Pricing » et « FAQ » en est l'exemple type :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    section h2 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Acme Notes</h1>
  <section>
    <h2>Features</h2>
    <p>Sync, search and share your notes.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>Free for personal use.</p>
  </section>
  <section>
    <h2>FAQ</h2>
    <p>Answers to common questions.</p>
  </section>
</body>
</html>

Chaque section est un chapitre de la page, et chaque titre est une ligne de la table des matières de la page. Comme les autres balises sémantiques, <section> n'a pas de style par défaut ; les bordures viennent du CSS.

section, article ou div

Les trois se ressemblent à l'écran. Ce qui diffère, c'est ce qu'ils disent du contenu :

Élément	Signifie	Test
`<article>`	Un contenu complet et autonome	Aurait-il du sens publié seul, sur un autre site ou dans un flux ?
`<section>`	Une partie thématique d'un ensemble plus grand	A-t-il (ou lui faut-il) un titre, et est-ce un chapitre de quelque chose ?
`<div>`	Rien : une boîte de style ou de mise en page	N'est-il là que pour le CSS ou le JavaScript ?

Les articles de blog, les commentaires de forum, les actualités et les fiches produits sont des articles. « Features », « Chapitre 2 » et « Produits associés » sont des sections. Une rangée flex qui aligne trois cartes est une div.

Des articles dans une section

Les deux s'imbriquent dans les deux sens. Ici, une section « Latest posts » contient plusieurs articles indépendants :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Section of articles</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .grid { display: flex; gap: 10px; }
    article { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px; }
    article h3 { margin: 10px 0 4px; font-size: 16px; }
    article p { color: #6b7280; font-size: 14px; }
  </style>
</head>
<body>
  <section>
    <h2>Latest posts</h2>
    <div class="grid">
      <article>
        <h3>Flexbox in 5 minutes</h3>
        <p>Rows, columns and gaps.</p>
      </article>
      <article>
        <h3>CSS Grid basics</h3>
        <p>Two-dimensional layout.</p>
      </article>
      <article>
        <h3>Forms that work</h3>
        <p>Labels and validation.</p>
      </article>
    </div>
  </section>
</body>
</html>

Remarquez la <div class="grid"> : elle n'existe que pour disposer les cartes en ligne, donc une div est la bonne balise. Chaque carte est un article car chaque billet tient debout seul.

Des sections dans un article

Un long article peut être divisé en sections, comme les chapitres d'un livre. Les niveaux de titre prolongent celui de l'article :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article with sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #2563eb; border-radius: 8px; padding: 0 14px; }
    section { border-inline-start: 4px solid #16a34a; padding-inline-start: 10px; margin-bottom: 12px; }
    section h3 { margin: 4px 0; }
  </style>
</head>
<body>
  <article>
    <h2>A beginner's guide to bread</h2>
    <section>
      <h3>Ingredients</h3>
      <p>Flour, water, salt, yeast.</p>
    </section>
    <section>
      <h3>Method</h3>
      <p>Mix, knead, rise, bake.</p>
    </section>
  </article>
</body>
</html>

La boîte bleue est l'article (tout le guide), les barres vertes sont ses sections. Donnez à une section son propre niveau de titre : un article en h2 contient des sections en h3.

Les sections nommées deviennent des repères

Les lecteurs d'écran listent certains éléments comme des repères entre lesquels les utilisateurs peuvent sauter. Une <section> ne devient un repère region que si elle a un nom accessible. Faites pointer aria-labelledby vers son titre :

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  ...
</section>

Faites-le pour les quelques sections vers lesquelles un utilisateur voudrait aller directement, pas pour toutes : une page avec vingt repères est aussi difficile à parcourir qu'une page sans aucun. Les sections sans nom restent utiles, car leurs titres apparaissent dans la liste des titres du lecteur d'écran.

Les sections font aussi de bonnes cibles pour les liens internes. Donnez-en une un id et un lien avec href="#id" y mène directement :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jump links</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { min-height: 420px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <p><a href="#faq">Jump to the FAQ</a></p>
  <section id="features" aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
  </section>
  <section id="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">FAQ</h2>
    <p><a href="#features">Back to features</a></p>
  </section>
</body>
</html>

Erreurs fréquentes

Utiliser <section> comme conteneur de style. S'il n'y a ni titre ni thème, utilisez <div>. La page sur le HTML sémantique montre la place de chaque balise de mise en page.
Entourer un seul article de blog de <section>. Un billet qui tient debout seul est un <article>.
Des sections sans titre. Ajoutez un titre, même masqué visuellement, ou demandez-vous si c'est vraiment une section.
Remplacer <main> par <section>. Le contenu principal de la page va dans <main> ; les sections vont à l'intérieur.
Nommer chaque section. N'ajoutez aria-labelledby qu'aux sections importantes, pour que la liste des repères reste courte.

Questions fréquentes

Qu'est-ce que la balise section en HTML ?

<section> regroupe un contenu qui appartient à un même thème, comme un chapitre d'un document ou la partie « Tarifs » d'une page d'accueil. Elle devrait normalement commencer par un titre qui dit de quoi parle la section.

Quelle est la différence entre section et div ?

<section> indique que le contenu est une partie thématique du document avec son propre titre. <div> n'indique rien ; c'est une boîte pour le style ou la mise en page. Si vous avez seulement besoin d'un conteneur pour le CSS, utilisez <div>.

Quelle est la différence entre section et article ?

<article> est un contenu qui a du sens seul, hors de la page : un article de blog, un commentaire, une fiche produit. <section> est une partie d'un ensemble plus grand qui n'a de sens que dans son contexte. Demandez-vous si vous pourriez publier le morceau seul : si oui, c'est un article.

Un article peut-il contenir des sections, et une section des articles ?

Oui, les deux. Un long article peut être découpé en sections, et une section comme « Derniers articles » peut contenir une liste d'articles.

Une section a-t-elle besoin d'un titre ?

Elle devrait en avoir un dans presque tous les cas, car c'est le titre qui nomme le thème. Si vous ne trouvez pas de titre pour elle, le contenu n'est probablement pas une section et une <div> convient mieux.

Concepts liés