logo oujood
🔍

  HTML : La balise <section> en HTML5

Structurez vos documents web avec la balise sémantique
: définition, compatibilité navigateurs, exemples pratiques et optimisation SEO.

OUJOOD.COM

Définition et utilisation de la balise <section> en HTML5

LES BALISES HTML5 SÉMANTIQUES

Qu'est-ce que la balise <section> en HTML5 ?

La balise <section> est un élément sémantique HTML5 qui permet de regrouper thématiquement un contenu au sein d'un document web. Contrairement à la balise générique <div>, la balise <section> apporte une signification structurelle forte, indiquant aux navigateurs et aux moteurs de recherche que le contenu encapsulé forme une unité logique cohérente.

Une section HTML5 représente un regroupement thématique de contenu, généralement accompagné d'un titre (h1 à h6). On l'utilise pour structurer des chapitres d'article, des blocs de fonctionnalités, des zones de navigation thématique ou toute partie distincte d'une page. Cette approche améliore l'accessibilité web, facilite l'indexation par Google et contribue à une meilleure architecture de l'information.

Règle essentielle : chaque balise <section> doit idéalement contenir un titre descriptif (<h1> à <h6>) pour être sémantiquement valide selon les recommandations du W3C et optimiser le référencement naturel (SEO on-page).

Syntaxe de base de la balise <section>

La structure minimale d'une balise section HTML est simple : une balise ouvrante <section>, un titre et du contenu, puis la balise fermante </section>. Voici un premier exemple illustrant la structure sémantique d'un document HTML5 avec plusieurs sections thématiques :

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple de sections HTML5</title>
</head>
<body>

  <!-- Première section : présentation du WWW -->
  <section>
    <!-- Le titre est obligatoire pour la validité sémantique -->
    <h1>Le World Wide Web (WWW)</h1>
    <p>
      Le <!-- contenu thématique de cette section -->
      World Wide Web est un système de documents hypertextes
      interconnectés, accessibles via Internet. Grâce à un navigateur web,
      l'utilisateur peut consulter des pages contenant texte, images,
      vidéos et naviguer entre elles via des liens hypertextes.
    </p>
  </section>

  <!-- Deuxième section : sujet distinct mais lié -->
  <section>
    <h1>Les protocoles Internet fondamentaux</h1>
    <p>
      HTTP, HTTPS et FTP sont les principaux protocoles
      <!-- chaque section traite un thème autonome -->
      permettant le transfert de données sur le Web.
    </p>
  </section>

</body>
</html>

Différence entre <section>, <article> et <div> en HTML5

Comprendre la distinction entre ces trois éléments est crucial pour une architecture HTML5 sémantique correcte et pour le référencement SEO technique :

La balise <section> regroupe un contenu thématiquement lié au sein d'une page, sans que ce contenu soit nécessairement autonome. La balise <article> encapsule un contenu autonome et redistribuable (billet de blog, actualité, commentaire). La balise <div>, quant à elle, est un conteneur générique sans valeur sémantique, utilisé uniquement à des fins de mise en page CSS.

Exemple illustrant les différences d'usage dans une page de blog :

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Section vs Article vs Div</title>
</head>
<body>

  <!-- <section> : regroupe les articles d'une catégorie -->
  <section>
    <h2>Actualités HTML5</h2>

    <!-- <article> : contenu autonome, redistribuable -->
    <article>
      <h3>Nouveautés de HTML5.2</h3>
      <p>Description de l'article indépendant...</p>
    </article>

    <article>
      <h3>Sémantique et accessibilité</h3>
      <p>Un autre article autonome...</p>
    </article>

  </section>

  <!-- <div> : conteneur purement stylistique, sans sens sémantique -->
  <div class="mise-en-page-sidebar">
    <p>Barre latérale sans signification structurelle.</p>
  </div>

</body>
</html>

Imbrication de balises <section> : structuration avancée d'un document HTML5

L'un des atouts majeurs de la balise <section> HTML5 est la possibilité d'imbriquer des sections pour créer une hiérarchie de contenu claire, similaire à la table des matières d'un livre. Cette technique est particulièrement efficace pour les longues pages de documentation, les tutoriels techniques et les pages piliers SEO.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Sections imbriquées HTML5</title>
</head>
<body>

  <!-- Section parente : thème principal -->
  <section>
    <h1>Guide HTML5 complet</h1>

    <!-- Sous-section 1 : sous-thème autonome -->
    <section>
      <h2>Les balises sémantiques</h2>
      <p>header, nav, main, section, article, aside, footer...</p>
    </section>

    <!-- Sous-section 2 : autre sous-thème -->
    <section>
      <h2>Les formulaires HTML5</h2>
      <p>input type="email", "date", "range", required, placeholder...</p>
    </section>

  </section>

</body>
</html>

Compatibilité navigateurs de la balise <section> en 2026

En 2026, la balise <section> HTML5 bénéficie d'une compatibilité universelle avec tous les navigateurs modernes. Elle est nativement supportée par Chrome, Firefox, Safari, Opera, Edge et leurs versions mobiles (Chrome pour Android, Safari iOS).

Remarque historique : Internet Explorer 8 et les versions antérieures ne supportaient pas les éléments sémantiques HTML5. Un correctif JavaScript (html5shiv) était nécessaire. Ces navigateurs étant définitivement obsolètes et hors support depuis de nombreuses années, cette contrainte n'est plus d'actualité en 2026. Vous pouvez utiliser <section> sans aucune réserve de compatibilité.

Pour vérifier la compatibilité actuelle d'un élément HTML, consultez Can I Use (caniuse.com), la référence en matière de support des technologies web.

La balise <section> et l'accessibilité web (ARIA)

La balise <section> possède un rôle ARIA implicite de type region, à condition qu'elle possède un nom accessible (via un attribut aria-labelledby pointant vers son titre, ou aria-label). Cela permet aux technologies d'assistance (lecteurs d'écran comme NVDA ou JAWS) de naviguer directement entre les sections, améliorant ainsi l'accessibilité WCAG 2.1 de votre page.

  📋 Copier le code

<!-- Bonne pratique accessibilité : aria-labelledby lie la section à son titre -->
<section aria-labelledby="titre-introduction">
  <h2 id="titre-introduction">Introduction à HTML5</h2>
  <p>
    HTML5 est la cinquième version majeure du langage de balisage
    <!-- Le lecteur d'écran annoncera "région : Introduction à HTML5" -->
    hypertexte standard du World Wide Web.
  </p>
</section>

Différences HTML 4.01 vs HTML5 : apport de <section>

La balise <section> est une nouveauté introduite avec HTML5 (recommandation W3C depuis 2014, Living Standard selon le WHATWG). En HTML 4.01, la structuration du contenu reposait exclusivement sur les balises <div> associées à des classes CSS, sans aucune valeur sémantique pour les moteurs de recherche ni pour les technologies d'assistance. L'introduction de <section>, aux côtés de <article>, <nav>, <header>, <footer> et <aside>, a constitué une révolution dans la structuration sémantique des documents web.

Attributs globaux : La balise <section> prend en charge l'ensemble des attributs globaux HTML5 (id, class, style, lang, title, data-*, aria-*, etc.).

Attributs d'événement : La balise <section> prend également en charge tous les attributs d'événement HTML5 (onclick, onmouseover, onfocus, etc.).

Retour à l'accueil du site

Par carabde | Mis à jour le 25 février 2026