Le HTML sémantique est une approche de rédaction du code HTML qui consiste à utiliser des balises dont le nom décrit explicitement la nature et le rôle du contenu qu’elles entourent, plutôt que des balises génériques comme div ou span.
L’objectif est de rendre la structure d’une page compréhensible à la fois par les humains (développeurs, rédacteurs) et par les machines (navigateurs, moteurs de recherche, lecteurs d’écran).
Balises sémantiques courantes :
header – en-tête d’une page ou d’une section.
nav – zone de navigation (menu)
main – contenu principal de la page
article – contenu autonome (article de blog, actualité)
section – section thématique du contenu
aside – contenu annexe (encadré, barre latérale)
footer – pied de page
figure -figcaption – illustration et sa légende
time – date ou heure.
mark – passage mis en évidence
Pourquoi c’est important
Accessibilité : les lecteurs d’écran s’appuient sur ces balises pour restituer la structure aux utilisateurs malvoyants.
- Référencement (SEO) : les moteurs de recherche comprennent mieux la hiérarchie et le rôle des contenus.
- Maintenabilité : le code est plus lisible et plus facile à faire évoluer.
- Interopérabilité : les navigateurs, les outils d’analyse et les assistants vocaux interprètent mieux la page.
Ce que le HTML sémantique n’est pas
Ce n’est pas une question de style : l’apparence visuelle reste gérée par le CSS.
Ce n’est pas une obligation technique : on peut tout faire avec des mais au prix d’une perte de sens.
Ce n’est pas magique : un mauvais usage (ex : partout) annule les bénéfices.
Analogie
Le HTML sémantique, c’est comme les panneaux de signalisation dans une ville. Une
sans nom, c’est un bâtiment anonyme : on ne sait pas s’il s’agit d’une école, d’un hôpital ou d’un magasin. Les balises sémantiques, ce sont les panneaux « École », « Hôpital », « Mairie » : tout le monde (piétons, GPS, services d’urgence) comprend immédiatement à quoi sert le bâtiment. La ville reste la même, mais elle devient lisible et navigable pour tous.
En résumé : le HTML sémantique est une bonne pratique de structuration du contenu web, qui consiste à utiliser la balise la plus juste pour chaque rôle. Il améliore l’accessibilité, le référencement et la maintenabilité, sans changer l’apparence visuelle de la page.