Sommaire
Le HTML sémantique retrouve une importance majeure avec l’essor de l’intelligence artificielle. Barry Adams explique comment une structure HTML appropriée facilite l’indexation par Google et améliore la visibilité dans les modèles de langage.
Retour aux fondamentaux du HTML
Le HTML a été conçu pour donner du sens et de la structure au contenu web. Chaque balise porte une signification précise : <p> pour les paragraphes, <h1> pour le titre principal, <ol> pour les listes ordonnées, <img> pour les images.
Cette approche permettait de comprendre l’objectif d’une page simplement en examinant son code source. Le contenu était entouré de balises spécifiques qui indiquaient clairement sa fonction, puis le CSS se chargeait de l’apparence visuelle.
L’ère des frameworks et la perte de sens
L’arrivée des éditeurs WYSIWYG puis des frameworks JavaScript a progressivement relégué le HTML au second plan. Les développeurs ont commencé à utiliser massivement les balises <div> et <span>, ce qui a créé des imbrications infinies dépourvues de structure sémantique.
Il en a résulté des pages web dont le sens n’apparaît qu’après rendu complet dans le navigateur. Cette évolution explique pourquoi Google doit consacrer des ressources importantes au rendu des pages durant son processus d’indexation.
Impact sur l’indexation Google
Pour les éditeurs de presse, cette distinction devient essentielle. Google n’a souvent pas le temps de rendre complètement un article d’actualité avant de devoir le classer dans les Top Stories. Un HTML sémantique bien structuré permet à Google d’extraire immédiatement le contenu principal.
C’est pourquoi les experts SEO insistent pour que le titre d’un article soit entouré de la balise <h1> et que ce soit la seule occurrence sur la page. Cette balise indique clairement à Google où commence l’article principal.
Les balises sémantiques essentielles
Pour le contenu
Plusieurs éléments HTML sémantiques facilitent l’extraction et l’indexation du contenu :
- Paragraphes : utiliser
<p>plutôt que<div>et<span>pour structurer le texte, - Sous-titres : employer
<h2>,<h3>,<h4>pour hiérarchiser les sections, - Images : toujours utiliser
<img>pour les visuels que Google doit indexer, - Liens : créer des liens avec
<a href="">pour assurer leur suivi par Google, - Listes : privilégier
<ul>pour les puces et<ol>pour les listes numérotées, - Emphase : utiliser
<em>pour l’italique et<strong>pour le gras.
Pour la structure
D’autres balises permettent d’organiser la page globalement :
<header>: section d’en-tête avec logo et navigation,<nav>: navigation principale du site,<section>: divisions thématiques de la page,<article>: contenu principal de l’article,<aside>: contenus secondaires comme les barres latérales,<footer>: pied de page.
Cette structure aide Google à comprendre le rôle de chaque section et à traiter les éléments de manière appropriée.
L’enjeu IA et les modèles de langage
L’importance du HTML sémantique s’accroît avec l’essor des modèles de langage comme ChatGPT et Perplexity. Contrairement à Google qui dispose de ressources importantes pour le rendu JavaScript, ces LLM ne rendent pas le JavaScript lors du traitement des pages web.
Bien que Google rende aujourd’hui beaucoup de contenu JavaScript, les contraintes de latence et de traitement restent importantes, particulièrement pour les contenus frais comme les actualités qui doivent être classés rapidement.
Seul Gemini de Google accède aux pages entièrement rendues grâce à l’index Google. Pour apparaître comme source dans ChatGPT ou Perplexity, il faut s’assurer que le contenu complet soit accessible dans le HTML brut non rendu.
Le HTML sémantique facilite également l’identification du contenu principal par ces systèmes. Il est plus simple pour une IA d’analyser quelques balises sémantiques que plusieurs centaines de <div> imbriquées pour localiser l’information pertinente.
Vers un web agentique
Si le « web agentique« se développe, le HTML sémantique deviendra probablement essentiel. Les balises <div> et <span> dénuées de sens augmentent les risques qu’un agent IA mal comprenne les actions à effectuer.
Avec du HTML sémantique pour les boutons, liens et formulaires, les risques d’échec d’un agent IA diminuent significativement. La signification inhérente aux balises appropriées guide l’agent sur les actions possibles.
HTML sémantique vs données structurées
Les données structurées n’ont pas rendu le HTML sémantique obsolète. Leurs objectifs diffèrent fondamentalement. Les données structurées excellent pour fournir des informations sur le contenu dans un format lisible par machine, mais elles ont des limites.
Elles ne précisent pas quel bouton ajoute un produit au panier, quel sous-titre précède un paragraphe critique, ou sur quels liens cliquer pour plus d’informations. Cette structuration du contenu reste essentielle pour une optimisation complète.
Utilisés ensemble, HTML sémantique et données structurées forment une combinaison imbattable pour la visibilité web.
Privilégier les sites web aux applications web
Pour les sites de diffusion de contenu, Barry Adams considère que les sites web classiques restent supérieurs aux applications web, particulièrement les Single Page Applications mal configurées avec rendu JavaScript côté client uniquement.
Les sites web sont construits en HTML et exploitent naturellement toutes ses possibilités sémantiques. Cette approche évite 90 % des pièges techniques SEO dans lesquels tombent souvent les SPA mal optimisées.
Bénéfices au-delà du SEO
Le HTML sémantique ne profite pas seulement aux moteurs de recherche et à l’IA. Il améliore considérablement l’accessibilité web en facilitant la navigation avec les lecteurs d’écran et autres technologies d’assistance.
Cette approche bénéficie à l’expérience utilisateur globale et crée un cercle vertueux. Une meilleure structure profite à tous les utilisateurs, systèmes et agents intelligents.
