Le HTML5 sémantique

Le HTML5 sémantique consiste à choisir des balises qui décrivent la nature du contenu (<article>, <nav>, <main>) plutôt que des balises génériques (<div>, <span>) qui ne portent aucune signification. Cette différence aide directement les moteurs et les IA à isoler le contenu utile du reste de la page.

Pourquoi la sémantique compte

Un <div> ne dit rien sur son contenu : il peut aussi bien contenir le texte principal d'un article qu'un bloc publicitaire ou un menu de navigation. Une balise sémantique, elle, porte une information explicite sur le rôle du bloc qu'elle englobe. Pour une machine qui doit décider quelle partie d'une page constitue le contenu principal à indexer ou à citer, cette information est directement exploitable, sans avoir à deviner à partir de heuristiques incertaines (position, classe CSS, quantité de texte).

Avant l'introduction du HTML5, les développeurs utilisaient déjà des conventions de nommage pour donner du sens à leurs balises (<div class="header">, <div class="nav">), mais ces classes CSS n'ont aucune valeur sémantique standardisée : un moteur ne peut pas savoir avec certitude qu'une classe nommée « header » correspond réellement à un en-tête, puisque n'importe quel développeur peut nommer ses classes comme il le souhaite. Les balises HTML5 sémantiques, elles, forment un vocabulaire commun et non ambigu, interprété de la même façon par tous les systèmes qui lisent du HTML.

Les balises sémantiques clés

<body>
  <header>
    <nav><!-- menu principal --></nav>
  </header>

  <main>
    <article>
      <h1>Titre de l'article</h1>
      <section>
        <h2>Première partie</h2>
        <p>...</p>
      </section>
      <section>
        <h2>Deuxième partie</h2>
        <p>...</p>
      </section>
    </article>
    <aside><!-- contenu lié, non essentiel --></aside>
  </main>

  <footer><!-- liens de bas de page, mentions légales --></footer>
</body>

<header> : en-tête de page ou de section (pas nécessairement le haut visuel de la page).
<nav> : bloc de liens de navigation.
<main> : contenu principal unique de la page — une seule balise <main> par page.
<article> : contenu autonome, qui aurait un sens même isolé du reste de la page (un billet de blog, une fiche produit).
<section> : regroupement thématique à l'intérieur d'un article ou d'une page — à utiliser uniquement lorsque la section a son propre titre logique (généralement un Hn), pas comme simple découpage visuel.
<aside> : contenu connexe mais non essentiel (liens associés, encart publicitaire).
<footer> : pied de page ou de section.

Isoler le contenu utile du bruit

Une page web contient rarement que du contenu principal : menu de navigation, bandeau de cookies, encarts publicitaires, footer avec liens légaux et réseaux sociaux occupent souvent une part importante du HTML. Sans structuration sémantique, une machine doit deviner quelle proportion du texte extrait est réellement pertinente. Un balisage correct avec <nav>, <aside> et <footer> clairement séparés du <main> et de l'<article> réduit ce bruit et concentre l'attention sur le contenu qui compte réellement — un enjeu directement lié à la façon dont un moteur lit votre page.

Sur certains sites, le contenu de navigation et les encarts périphériques représentent une part du HTML plus importante que le contenu principal lui-même, en particulier sur des pages courtes. Dans ce cas, une structuration sémantique précise devient encore plus déterminante pour qu'une machine ne surpondère pas ce bruit par rapport au texte qui compte réellement.

Erreurs fréquentes

Tout coder en <div> avec des classes CSS, sans aucune balise sémantique — un choix encore répandu sur les sites générés par certains builders visuels.
Utiliser plusieurs balises <main> sur une même page.
Placer le contenu éditorial principal dans un <aside> par erreur de structure.
Utiliser <section> comme simple conteneur de style sans regroupement thématique réel.
Imbriquer un <article> à l'intérieur d'un <nav> ou d'un <aside>, ce qui contredit la logique même de ces balises.

Un bénéfice qui dépasse le SEO

Le HTML5 sémantique améliore également l'accessibilité : les lecteurs d'écran s'appuient sur ces mêmes balises pour permettre à un utilisateur malvoyant de naviguer directement vers le contenu principal, sans devoir parcourir le menu à chaque page. Un même effort de structuration sert donc simultanément l'accessibilité, le SEO classique et le GEO.

Migrer un site existant vers une structure sémantique

Restructurer un site déjà construit en <div> génériques n'exige pas nécessairement une refonte complète. Dans la plupart des cas, il s'agit de remplacer les balises englobantes existantes par leur équivalent sémantique (<div class="main-content"> devient <main>, <div class="site-footer"> devient <footer>) sans toucher au CSS qui cible déjà ces éléments par leur classe. Cette migration progressive, template par template, permet d'améliorer la structure sans risquer de casser la mise en forme visuelle existante — un chantier réaliste même sur un site déjà en production.

Pour aller plus loin sur ce que cette structuration permet une fois le texte extrait, la leçon sur le chunking explique comment un LLM découpe ensuite ce contenu en blocs exploitables, et la leçon sur les données structurées Schema.org montre comment aller encore plus loin dans la clarté des informations transmises.