Le HTML sémantique consiste à utiliser les balises HTML selon leur signification plutôt que leur apparence visuelle. Plutôt que de construire une page entièrement avec des <div> et des <span>, le HTML sémantique utilise des éléments comme <article>, <nav> ou <header> pour décrire la structure et le rôle de chaque partie du contenu. Cette approche améliore l'accessibilité, le référencement et la maintenabilité de votre code.
La balise <header> représente l'en-tête d'une section ou de la page entière. Elle contient typiquement le logo, la navigation principale, le titre du site ou un formulaire de recherche. Chaque page ne devrait avoir qu'un seul <header> principal, mais les balises <article> et <section> peuvent avoir leur propre header interne.
La balise <nav> identifie les blocs de navigation importants : menu principal, fil d'Ariane, pagination, table des matières. Elle aide les moteurs de recherche à comprendre la structure de liens de votre site et les technologies d'assistance à proposer des raccourcis de navigation. Réservez-la aux navigations principales et ne l'utilisez pas pour chaque groupe de liens.
La balise <main> encadre le contenu principal unique de la page. Elle ne doit apparaître qu'une seule fois par page et ne pas être imbriquée dans d'autres éléments sémantiques comme <article> ou <aside>. Google utilise cette balise pour identifier rapidement le contenu principal à indexer, en excluant les éléments récurrents comme l'en-tête et le pied de page.
La balise <footer> représente le pied de page et contient généralement les informations de copyright, les liens vers les mentions légales, la politique de confidentialité et les liens de contact. Comme pour <header>, chaque section peut avoir son propre footer.
La balise <article> définit un contenu autonome qui pourrait être distribué indépendamment : un article de blog, un commentaire, un post de forum, une fiche produit. C'est un signal fort pour les moteurs de recherche qui identifient ainsi le contenu éditorial principal de la page. Chaque <article> devrait contenir un titre (h1 à h6) pour être correctement interprété.
La balise <section> regroupe un bloc thématique de contenu. Elle diffère de <div> par sa valeur sémantique : une <section> représente une partie logique du document avec son propre titre. Utilisez <section> pour structurer les grandes parties d'un article ou d'une page, et <div> uniquement à des fins de mise en page sans signification sémantique.
La balise <aside> contient du contenu tangentiellement lié au contenu principal : encadrés, barres latérales, biographies d'auteur, articles connexes. Elle indique aux moteurs de recherche que ce contenu est complémentaire mais non essentiel à la compréhension du sujet principal.
La balise <figure> encadre un contenu illustratif autonome : image, schéma, graphique, extrait de code, vidéo. Associée à <figcaption>, elle fournit une légende descriptive que les moteurs de recherche utilisent pour mieux comprendre le contenu visuel. Cela complète l'attribut alt des images pour un référencement optimal :
<figure> : conteneur sémantique pour l'illustration<figcaption> : légende descriptive qui contextualise l'élémentLes moteurs de recherche utilisent le HTML sémantique pour comprendre la hiérarchie et les relations entre les différentes parties de votre contenu. Un balisage sémantique correct apporte plusieurs avantages SEO :
Le HTML sémantique fonctionne en synergie avec les balises meta SEO. Alors que les balises meta communiquent des métadonnées aux moteurs de recherche, le HTML sémantique structure le contenu visible de manière significative. Ensemble, ils fournissent un contexte complet qui facilite l'indexation et le classement.
Pour maximiser l'impact, combinez le HTML sémantique avec une hiérarchie de titres cohérente (h1 unique, h2 pour les sections principales, h3 pour les sous-sections) et un maillage interne bien pensé. Évitez les erreurs SEO courantes comme l'utilisation de multiples h1 ou l'imbrication incorrecte des balises sémantiques pour tirer pleinement parti du HTML sémantique dans votre stratégie de référencement.
Testez notre compteur de mots gratuit pour analyser vos textes !
Essayer le compteur