HTML sémantique

Ce que vérifie ce contrôle

Scanne le DOM rendu et compte les éléments HTML5 sémantiques — <article>, <section>, <nav>, <header>, <footer>, <aside>, <main>, <figure>, <figcaption>, <time> — par rapport au compte total d’éléments. Les pages construites presque entièrement de <div> et <span> imbriqués scorent bas ; les pages avec un squelette sémantique clair scorent haut.

Pourquoi c’est important

Le HTML sémantique est la différence entre un balisage qu’une machine peut parser et un balisage qu’une machine peut comprendre. Un <div class="header"> est invisible pour tout ce qui ne lit pas vos classes CSS. Un <header> est non ambigu : chaque navigateur, lecteur d’écran, crawler de recherche et agent LLM sait quel rôle ce bloc joue sur la page.

Trois audiences lisent votre HTML :

• Les agents IA (ChatGPT, Perplexity, Google AI Overviews) extraient et citent du contenu. Ils tirent de manière fiable depuis les balises <article>, <main> et <time datetime>. Ils devinent à l’intérieur de la soupe de div.
• Les lecteurs d’écran génèrent une carte de repères de la page pour que les utilisateurs sautent directement à la navigation, au contenu principal ou au footer. Pas de balises sémantiques signifie pas de repères. Combinez ce contrôle avec repères ARIA.
• Les moteurs de recherche pondèrent le contenu à l’intérieur de <article> et <main> plus haut que le contenu à l’intérieur de conteneurs génériques — et ignorent de manière fiable le boilerplate à l’intérieur de <nav> et <footer>.

Le correctif est bon marché. Le coût de ne pas le faire se compose à travers chaque page du site.

Comment corriger

Remplacez les conteneurs génériques par l’élément qui décrit leur rôle.

Chrome de page :

<!-- Avant -->
<div class="site-header">
  <div class="nav">...</div>
</div>
<div class="main-content">...</div>
<div class="site-footer">...</div>

<!-- Après -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Articles de blog et articles : enveloppez chaque post dans <article> et marquez les dates avec <time datetime>. L’attribut datetime est lisible par machine et apparaît dans les citations IA et l’auto-extraction Schema.org.

<article>
  <header>
    <h1>Titre du post</h1>
    <time datetime="2026-05-11">11 mai 2026</time>
  </header>
  <p>Corps du post...</p>
</article>

Images avec légendes : utilisez <figure> + <figcaption> quand la légende fait partie du contenu (pas juste une infobulle au survol).

<figure>
  <img src="chart.png" alt="Croissance du chiffre d'affaires 2024-2026" />
  <figcaption>Chiffre d'affaires trimestriel, T1 2024 à T1 2026.</figcaption>
</figure>

Quand utiliser <section> vs <div> : utilisez <section> pour une région nommée de la page — une qui aurait un titre dans un plan (Tarifs, Fonctionnalités, FAQ). Utilisez <div> pour un regroupement purement présentationnel (un wrapper flex, une bordure de carte). Si vous ne pouvez pas écrire un titre d’une ligne pour elle, c’est un <div>.

Recoupez le résultat avec repères ARIA et texte de lien descriptif — ces contrôles se renforcent mutuellement.

Questions fréquentes

Est-ce important si j’utilise <div role="main"> au lieu de <main> ?

Pour l’accessibilité, ils sont équivalents — les deux exposent un repère main. Pour tous les autres (agents IA, crawlers de recherche, relecteurs de code), <main> est plus clair et plus court. Utilisez l’élément natif. Les rôles ARIA existent pour patcher des éléments qui ne peuvent pas exprimer leur rôle, pas pour remplacer ceux qui le peuvent.

Puis-je avoir plusieurs <header> et <footer> par page ?

Oui. <header> et <footer> sont scopés à leur ancêtre de sectionnement le plus proche (<article>, <section>, <main> ou le document). Un article de blog peut avoir son propre <header> (titre + date) à l’intérieur de <article>, plus le <header> global du site en haut de la page. <main> est l’exception — un seul par document.

Le thème de mon CMS utilise des div partout. Vaut-il le coup de réécrire ?

Si vous contrôlez le template, oui — c’est une édition unique qui améliore l’accessibilité, le SEO et l’extractabilité IA pour chaque page qui l’utilise. Si vous ne le contrôlez pas (un thème hébergé sur Shopify/Squarespace), concentrez-vous sur la zone de contenu où vous avez le contrôle : enveloppez les posts dans <article>, marquez les dates avec <time>, utilisez <figure> pour les images avec légende. Le chrome s’améliorera quand le thème se mettra à jour.