SGlossaire

Semantic HTML

Un site « tout en div » est lisible à l'œil, opaque pour la machine.

Définition

Le Semantic HTML (HTML sémantique) consiste à utiliser les balises HTML pour leur sens, et non pour leur apparence : un titre dans un <h1>/<h2>, une liste dans un <ul>, un article dans un <article>, un tableau de données dans un <table>. Une balise sémantique dit à la machine ce qu'est un élément ; une balise neutre (<div>, <span>) ne dit rien. C'est la couche de structure qui rend une page compréhensible au-delà de son rendu visuel.

Pourquoi ça compte

Un humain comprend une page par sa mise en forme ; une machine la comprend par son balisage. Les moteurs et les systèmes de récupération s'appuient sur la structure sémantique pour repérer où commence une section, ce qui est un titre, ce qui est une réponse - donc pour isoler des blocs extractibles. Une hiérarchie de titres claire et des balises justes aident directement la couche répondabilité : elles fournissent les repères qui permettent de découper la page en passages citables. À l'inverse, une page entièrement bâtie en <div> stylés (« div soup ») oblige la machine à deviner sa structure - et elle devine mal. C'est aussi un pilier de l'accessibilité, qui repose sur les mêmes balises.

Exemple concret

Deux pages affichent la même FAQ à l'écran. La première utilise des <div> mis en forme pour ressembler à des questions et des réponses. La seconde emploie une vraie hiérarchie : titres <h3> pour les questions, paragraphes pour les réponses, éventuellement complétée d'un balisage FAQPage. Visuellement, elles sont identiques. Pour une machine, seule la seconde expose des questions et des réponses identifiables comme telles — donc extractibles et éligibles aux résultats enrichis. La première n'est qu'un bloc visuel indistinct.

Comment l'optimiser

  • Respecter la hiérarchie des titres : un seul <h1>, puis <h2>/<h3> imbriqués logiquement - c'est l'ossature que les machines lisent.
  • Choisir la balise selon le sens : <article>, <section>, <nav>, <ul>, <table> plutôt que des <div> génériques partout.
  • Structurer les données tabulaires en <table> : un vrai tableau est extractible ; une grille de <div> ne l'est pas.
  • Garder la structure cohérente avec le contenu : les titres doivent refléter le plan réel de la page, pas servir d'effet visuel.

Erreurs fréquentes

  • La « div soup » : tout construire en <div>/<span> stylés, sans aucune sémantique exploitable.
  • Utiliser les niveaux de titre pour leur taille visuelle plutôt que pour la hiérarchie logique.
  • Sauter des niveaux (<h2> directement à <h4>) ou empiler plusieurs <h1>, brouillant l'ossature.
  • Croire que le rendu visuel suffit : ce qui est clair à l'œil peut être illisible pour la machine.

Termes liés

FAQ

Semantic HTML et données structurées, est-ce la même chose ? Non, mais elles se complètent. Le HTML sémantique structure le contenu visible (titres, listes, sections) ; les données structurées (JSON-LD) ajoutent une couche de sens explicite, séparée du texte. L'un porte la structure, l'autre la description.

Le HTML sémantique influence-t-il le référencement ? Indirectement mais réellement : il aide les moteurs à comprendre et à découper la page, facilite l'extraction de passages et soutient l'accessibilité. Ce n'est pas un facteur de rang isolé, mais un socle de lisibilité machine.

Comment savoir si mes pages sont bien structurées ? Inspectez la hiérarchie des titres (un seul <h1>, des niveaux cohérents) et vérifiez que les éléments de sens (listes, tableaux, sections) emploient les bonnes balises plutôt que des <div> génériques.