Élément HTML <section> : l'élément de section générique

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'élément HTML <section> représente une section générique et autonome d'un document, qui n'a pas d'élément sémantique plus spécifique pour la représenter. Les sections doivent toujours comporter un titre, sauf très rares exceptions.

Dans cet article

Exemple interactif

<h1>Choisir une pomme</h1>
<section>
  <h2>Introduction</h2>
  <p>
    Ce document propose un guide pour vous aider dans la tâche importante de
    choisir la bonne pomme.
  </p>
</section>

<section>
  <h2>Critères</h2>
  <p>
    Il existe de nombreux critères à prendre en compte pour choisir une
    pomme&nbsp;: taille, couleur, fermeté, douceur, acidité...
  </p>
</section>

h1,
h2 {
  margin: 0;
}

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

Comme mentionné ci-dessus, <section> est un élément de sectionnement générique et ne doit être utilisé que s'il n'existe pas d'élément plus spécifique pour le représenter. Par exemple, un menu de navigation doit être englobé dans un élément <nav>, mais une liste de résultats de recherche ou une carte et ses contrôles, qui n'ont pas d'élément spécifique, peuvent être placés dans un élément <section>.

Considérez aussi les cas suivants :

Si le contenu de l'élément représente une unité autonome et indépendante qui a du sens en tant que pièce syndiquée (par exemple, un article de blog, un commentaire de blog ou un article de journal), l'élément <article> sera plus approprié.
Si le contenu représente une information tangente utile qui accompagne le contenu principal, mais n'en fait pas directement partie (comme des liens associés ou une biographie d'auteur·ice), utilisez <aside>.
Si le contenu représente la zone principale d'un document, utilisez <main>.
Si vous utilisez l'élément uniquement comme conteneur de mise en forme, utilisez plutôt <div>.

Pour récapituler, chaque <section> doit être identifiée, généralement en incluant un titre (élément h1 à h6) comme enfant de l'élément <section>, autant que possible. Voir ci-dessous des exemples où un <section> peut apparaître sans titre.

Exemples

Exemple simple d'utilisation

Avant

html
<div>
  <h2>Mon super titre</h2>
  <p>Beaucoup de contenu génial</p>
</div>

Résultat

Après

html
<section>
  <h2>Mon super titre</h2>
  <p>Beaucoup de contenu génial</p>
</section>

Résultat

Utiliser une section sans titre

Les circonstances où vous pouvez voir <section> utilisé sans titre se trouvent généralement dans des sections d'applications web ou d'interfaces utilisateur, plutôt que dans des structures de documents traditionnelles. Dans un document, il n'est pas vraiment logique d'avoir une section distincte de contenu sans titre pour décrire son contenu. Ces titres sont utiles pour tous les lecteurs·rices, mais particulièrement pour les utilisateur·ice·s de technologies d'assistance comme les lecteurs d'écran, et ils sont aussi bénéfiques pour le référencement.

Considérez cependant un mécanisme de navigation secondaire. Si la navigation globale est déjà englobée dans un élément <nav>, il est possible d'entourer un menu précédent/suivant dans un élément <section> :

html
<section>
  <a href="#">Article précédent</a>
  <a href="#">Article suivant</a>
</section>

Ou bien une barre de boutons pour contrôler votre application ? Celle-ci n'a pas forcément besoin d'un titre, mais reste une section distincte du document :

html
<section>
  <button class="reply">Répondre</button>
  <button class="reply-all">Répondre à tous</button>
  <button class="fwd">Transférer</button>
  <button class="del">Supprimer</button>
</section>