Le balisage HTML traduit la structure visuelle en langage machine. Un texte mis en gras et en grande taille reste invisible pour les moteurs s'il est seulement encapsulé dans une `div` générique. Les balises sémantiques comme `h1`, `h2`, `p`, `nav` ou `article` donnent un sens explicite à la hiérarchie que l'œil perçoit instinctivement. Le vrai sujet ici n'est pas le style ou la vitesse, mais la correspondance : ce que le lecteur voit comme un titre, le code doit le déclarer comme un titre.
Pourquoi l'apparence ne suffit pas
Un moteur de recherche ne regarde pas votre page comme un humain. Il lit le DOM, c'est-à-dire l'arbre des balises, pas le rendu visuel. Une taille de police, une graisse ou une couleur sont des propriétés CSS : elles décorent, elles ne nomment pas. Deux blocs visuellement identiques peuvent porter des rôles opposés selon leur balise, et seul ce rôle compte pour le classement et l'extraction du contenu.
C'est pour cette raison qu'imiter un titre avec du style sans la balise `h` correspondante crée un décalage invisible à l'écran mais bien réel dans le code. Le lecteur voit une hiérarchie claire ; le crawler, lui, voit une suite de paragraphes plats sans niveaux.
La règle de correspondance
Pour chaque élément que l'œil identifie comme un niveau de titre, de liste ou de navigation, il existe une balise dédiée. Si vous devez choisir une `div` neutre, c'est souvent le signe qu'un élément sémantique plus précis existe.
Comment aligner maquette et balisage
L'alignement se joue dès la conception, avant la première ligne de CSS. Une maquette qui hiérarchise proprement l'information rend le balisage presque mécanique pour le développeur. Quelques repères concrets :
- Un seul titre principal par page, traduit en `h1`, qui reprend le sujet central.
- Les sous-titres descendent par niveaux sans saut : un `h2` ouvre une section, un `h3` la subdivise, jamais un `h4` directement sous un `h2`.
- Les énumérations visuelles (puces, étapes numérotées) deviennent des `ul` ou `ol`, pas des `div` espacées à la main.
- Les zones structurelles (en-tête, menu, contenu, pied de page) utilisent `header`, `nav`, `main`, `footer`.
Prenez une fiche produit : le nom du produit affiché en gros est le `h1`, les intitulés de sections (description, caractéristiques, avis) sont des `h2`, et la liste de spécifications devient une vraie liste HTML. Visuellement rien ne change, mais la page devient lisible par une machine.
Le piège du titre décoratif
Un intertitre stylé via une classe CSS, sans balise `h`, casse la hiérarchie que les crawlers reconstituent en parcourant `h1` à `h6`. C'est l'écart le plus courant entre une maquette soignée et un DOM mal structuré.
Ce travail de traduction se pense au moment de la création d'un site bien structuré, quand le gabarit HTML est encore modelable. Le reprendre après coup sur un site déjà en ligne est toujours plus coûteux.
Là où s'arrête la sémantique
Un balisage propre rend votre hiérarchie compréhensible, mais il ne juge pas la qualité graphique ni le confort de lecture. Un design clair aide aussi le référencement par d'autres voies : sur ce volet, l'angle complémentaire est traité dans un bon design aide-t-il au référencement. De même, la question du rendu sur petit écran et de l'arbitrage entre formats relève d'un autre débat, abordé dans design adaptatif ou responsive : lequel choisir.
Un test rapide
Désactivez les styles de votre page (ou regardez sa version brute) : si la hiérarchie reste lisible, c'est que vos titres et sections sont portés par des balises et non par du CSS. Sinon, la structure n'existe que pour l'œil.
La bonne pratique tient en une phrase : ne laissez jamais le style décider seul du sens. Le CSS habille, le HTML déclare. Quand le développeur reproduit fidèlement dans le DOM la hiérarchie validée sur la maquette, la même page sert deux lecteurs à la fois, l'humain et le moteur, sans compromis entre les deux.