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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'élément HTML <section> représente une section générique d'un document, par exemple un groupe de contenu thématique. Une section commence généralement avec un titre.

Exemple interactif

<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>
    This document provides a guide to help with the important task of choosing
    the correct Apple.
  </p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple —
    size, color, firmness, sweetness, tartness...
  </p>
</section>

h1,
h2 {
  margin: 0;
}

Ainsi, un menu de navigation devrait être délimité par un élément <nav> mais une liste de résultat de recherche, qui ne dispose pas d'élément spécifique pour être représentée, pourrait être englobée dans un élément <section>.

Note : Si le contenu de l'élément devrait être considéré comme un fragment indépendant (qui puisse être séparée du reste du contenu), l'élément <article> sera plus pertinent.

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

  • Chaque élément <section> devrait être identifié, généralement grâce à un élément de titre (<h1>-<h6>) qui est un élément fils de l'élément <section>.
  • S'il est plus pertinent que le contenu soit à part, on utilisera l'élément <article>.
  • L'élément <section> ne doit pas être utilisé comme un conteneur générique : c'est le rôle de <div>, notamment lorsque le sectionnement du contenu sert uniquement la mise en forme. Pour savoir lequel utiliser, on peut se demander si la section doit apparaître sur le plan du document : si oui, on utilisera <section>, sinon, <div>.

Exemples

HTML

html
<section>
  <h1>Titre</h1>
  <p>Du contenu sur un thème pour ce titre</p>
</section>

Résultat

Résumé technique

Catégories de contenu Contenu de flux, contenu sectionnant, contenu tangible.
Contenu autorisé Contenu de flux.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisés Tout élément qui accepte du contenu de flux. Un élément <section> ne peut pas être le descendant d'un élément <address>.
Rôles ARIA autorisés alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, search, status, tabpanel
Interface DOM HTMLElement

Spécifications

Specification
HTML
# the-section-element

Compatibilité des navigateurs

Voir aussi