La balise HTML <section>

L'élément HTML <section> est l'un des éléments sémantiques HTML5. Il regroupe un ensemble de contenus liés qui forment une partie thématique de la page — une partie qui, idéalement, apparaîtrait comme une entrée dans le plan du document (un bloc d'actualités, une zone « Contactez-nous », un chapitre d'un long article, etc.).

Cette page explique ce que signifie <section>, comment choisir entre <section>, <article> et <div>, pourquoi une section a presque toujours besoin d'un titre, et la règle d'accessibilité qui transforme une section en repère de navigation.

Quand utiliser <section> plutôt que <article> ou <div>

Ces trois éléments semblent interchangeables, mais ils ont des significations très différentes. Choisissez en fonction de votre intention, pas de l'apparence :

• <section> — un regroupement thématique de contenu qui appartient au plan de la page et possède son propre titre. Utilisez-le lorsque le contenu est « une partie distincte de cette page » mais n'a pas de sens en lui-même une fois retiré de la page. Exemples : un bloc Introduction, un bloc Tarifs, un bloc Avis sur une page produit.
• <article> — une composition autonome et distribuable indépendamment. Utilisez-le lorsque le contenu aurait encore du sens si vous l'extrayiez et le publiiez ailleurs (un flux syndiqué, une entrée RSS, un résultat de recherche). Exemples : un article de blog, une actualité, un commentaire d'utilisateur, une fiche produit.
• <div> — aucune signification sémantique ; une boîte générique qui n'existe que comme point d'accroche pour le style ou le script. Utilisez <div> lorsque vous avez simplement besoin d'un conteneur pour la mise en page (un conteneur flex/grid, une colonne) et qu'il n'y a aucun contenu thématique à qualifier.

Un test rapide : si vous pouvez donner un titre significatif au bloc, c'est probablement un <section>. Si le bloc pouvait être autonome comme sa propre page ou entrée de flux, c'est un <article>. Si vous l'ajoutez uniquement pour y attacher du CSS ou une classe, c'est un <div>.

L'exigence du titre

HTML s'attend à ce que chaque <section> soit identifiée, et la façon habituelle de le faire est d'utiliser un titre (<h1>–<h6>). Une section sans titre n'a pas de sujet clair et produit une entrée confuse, « sans titre », dans les plans de document des technologies d'assistance.

Utilisez le niveau de titre qui correspond à la profondeur d'imbrication : un <h2> pour une section de premier niveau sous le <h1> de la page, un <h3> pour une section imbriquée d'un niveau plus profond, et ainsi de suite. Conservez une hiérarchie logique plutôt que de sauter des niveaux — consultez Titres HTML pour les règles.

<h1>Web technologies</h1>

<section>
  <h2>HTML</h2>
  <p>HTML is the standard markup language for creating web pages.</p>
</section>

<section>
  <h2>CSS</h2>
  <p>CSS describes how HTML elements should be presented.</p>
</section>

<section> et accessibilité : le repère region

Un <section> n'est pas automatiquement un repère vers lequel les utilisateurs de lecteurs d'écran peuvent naviguer. Il ne devient un repère region navigable que lorsqu'il possède un nom accessible. Vous pouvez le lui donner de deux manières :

• aria-labelledby pointant vers l'id de son titre (méthode préférée — le titre visible et le nom accessible restent synchronisés), ou
• aria-label avec une chaîne littérale (lorsqu'il n'y a pas de texte de titre visible à référencer).

Sans nom, la section n'est qu'un regroupement pour le plan ; avec un nom, elle apparaît dans la liste des repères du lecteur d'écran.

<section aria-labelledby="pricing-heading">
  <h2 id="pricing-heading">Pricing</h2>
  <p>Choose the plan that fits your team.</p>
</section>

<!-- No visible heading? Name it directly: -->
<section aria-label="Search results">
  <p>3 results found.</p>
</section>

C'est pour cela que <section> diffère des régions comme <main>, <aside>, <header> et <footer> : ceux-ci exposent des rôles de repère par eux-mêmes, tandis que <section> nécessite un nom pour le faire.

Syntaxe

La balise <section> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<section>) et fermante (</section>).

Exemple de la balise HTML <section> :

<!DOCTYPE html>
<html>
  <head>
    <title>Using the section tag</title>
  </head>
  <body>
    <section>
      <h2>Hypertext markup language HTML</h2>
      <p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
    </section>
    <section>
      <h2>CSS</h2>
      <p>Formal language, which is used as a description zone, formatting the appearance of a web page, written by the help of markup languages HTML and XHTML, but it can be applied to any XML-document, for example, to SVG or XUL.</p>
    </section>
  </body>
</html>

Résultat

Exemple d'un <section> imbriqué dans un <article> :

Un contenu long et autonome est un <article> ; les chapitres qui le composent sont des éléments <section>. Chaque section possède son propre titre et son propre contenu distinct.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <h1>A short guide to web technologies</h1>
      <p>Modern web pages are built from three core technologies that work together.</p>

      <section>
        <h2>HTML: structure</h2>
        <p>HTML is the standard markup language for web pages. It describes the structure of a document — headings, paragraphs, links and media — so browsers can render it as a page.</p>
      </section>

      <section>
        <h2>CSS: presentation</h2>
        <p>CSS controls how the structured content looks: colors, spacing, typography and responsive layout across different screen sizes.</p>
      </section>

      <section>
        <h2>JavaScript: behavior</h2>
        <p>JavaScript adds interactivity, letting the page respond to user actions, update content dynamically and communicate with servers.</p>
      </section>
    </article>
  </body>
</html>

Attributs

La balise <section> prend en charge les attributs globaux et les attributs d'événement.

Comment styliser une balise HTML <section>

section {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
}

Entraînement