Qu'est-ce que le HTML Sémantique ?
Mais d’abord, que signifie le mot sémantique ?
Pour faire court et simple, la définition de sémantique est : « qui concerne le sens, la signification ».
C’est dans cet est esprit qu’il est utilisé dans le SEO on-page.
En effet, le HTML sémantique, également connu sous le nom de balisage sémantique, désigne l'utilisation de balises HTML qui transmettent la signification - ou la valeur sémantique - du contenu qu'elles renferment.
En ajoutant des balises sémantiques HTML à vos pages, vous fournissez des informations supplémentaires qui définissent les rôles et l'importance relative des différentes parties de votre page.
Au contraire, le HTML non sémantique utilise des balises qui ne véhiculent pas directement de sens.
Note : HTML est un langage utilisé pour structurer un site web. Ce guide suppose une connaissance de base du langage HTML. Si vous êtes totalement débutant(e), vous pouvez consulter cet article d'introduction au langage HTML.
Que Sont les Balises Sémantiques HTML ?
Les balises sémantiques HTML sont des balises qui définissent la signification du contenu qu'elles renferment.
Par exemple, des balises comme <header>, <article>, et <footer> sont des balises sémantiques HTML. Elles indiquent clairement le rôle du contenu qu'elles renferment.
En revanche, des balises comme <div> et <span> sont des exemples typiques d'éléments HTML non sémantiques. Elles servent uniquement de supports au contenu sans donner aucune indication sur le type du contenu ou sur le rôle qu'il joue dans la page.
Pourquoi Dois-Je Utiliser des Balises Sémantiques HTML ?
Les balises sémantiques HTML sont plus faciles à lire et à comprendre, notamment par les développeurs web qui examinent le code.
Mais il y a aussi deux raisons plus spécifiques qui justifient de toujours utiliser des balises sémantiques.
Accessibilité
Pour les utilisateurs qui voient bien, il est facile d'identifier les différentes parties d'une page web. Les en-têtes, les footers et le contenu principal sont tous immédiatement identifiables.
Mais ce n'est pas aussi facile pour les utilisateurs aveugles ou malvoyants qui utilisent des lecteurs d'écran.
Bien utiliser les balises sémantiques HTML permettra à ces lecteurs de mieux comprendre votre contenu, car leurs lecteurs d'écran le leur communiqueront plus précisément.
SEO
Les balises sémantiques HTML sont importantes pour le SEO (optimisation pour les moteurs de recherche), car elles indiquent le rôle du contenu dans les balises.
Ces informations permettent aux robots des moteurs de recherche, comme Googlebot, de mieux comprendre votre contenu.
Vous augmentez ainsi les chances que votre contenu soit sélectionné comme candidat au classement sur la page de résultats des moteurs de recherche (SERP) pour des mots clés pertinents.
En bref, les pages dont le code HTML sémantique est correctement implémenté bénéficient d'un avantage SEO.
Types de Balises Sémantiques HTML
Les balises sémantiques peuvent définir différentes parties d'une page web.
Examinons les éléments sémantiques HTML les plus courants, divisés en deux catégories en fonction de leur utilisation :
- Balises sémantiques HTML pour la structure
- Balises sémantiques HTML pour le texte
Balises sémantiques HTML pour la structure
De nombreuses balises sémantiques HTML renseignent sur la mise en forme d'une page.
Ces balises "structurelles" ont été introduites lors du passage du HTML4 au HTML5. C'est pourquoi elles sont également connues sous le nom de balises sémantiques HTML5 ou d'éléments sémantiques HTML5.
En voici la liste complète :
- <header> : La balise de titre définit le contenu qui doit être considéré comme l'information liminaire d'une page ou d'une section.
- <nav> : La balise de navigation est utilisée pour les liens de navigation. Elle peut être imbriquée dans la balise <header>, mais des balises <nav> de navigation secondaire sont aussi couramment utilisées ailleurs sur la page.
- <main> : Cette balise contient le contenu principal (également appelé corps) d'une page. Il ne doit y avoir qu'une seule balise de ce type par page.
- <article> : La balise article définit un contenu qui peut être indépendant de la page ou du site sur lequel il se trouve. Il ne s'agit pas nécessairement d'un "article de blog". Pensez plutôt à un "article vestimentaire", c'est-à-dire un élément autonome qui peut être utilisé dans différents contextes.
- <section> : L'utilisation de <section> est un moyen de regrouper des contenus proches appartenant à un thème similaire. Une balise section diffère d'une balise article. Elle n'est pas autonome, mais fait partie d'un ensemble.
- <aside> : L'élément "aside" désigne un contenu moins important. Il est souvent utilisé pour les barres latérales, c'est-à-dire les zones qui fournissent des informations complémentaires mais non essentielles.
- <footer> : Vous utilisez <footer> au bas d'une page. Cette partie contient généralement des coordonnées, des informations sur les droits d'auteur et des éléments de navigation sur le site.
Balises Sémantiques HTML pour le Texte
Les balises sémantiques HTML pour le texte sont des balises HTML qui, en plus du formatage, transmettent la fonction sémantique du texte qu'elles contiennent.
Voici quelques-uns des exemples les plus courants :
- <h1> (titre) : La balise H1 indique le titre de premier niveau. Il n'y a généralement qu'un seul titre H1 par page.
- <h2> à <h6> (sous-titres) : Les sous-titres de différents niveaux d'importance. Il peut y avoir plusieurs sous-titres de même niveau sur une même page
- <p> (paragraphe) : Un paragraphe de texte autonome.
- <a> (ancre) : Utilisé pour marquer un hyperlien d'une page à une autre.
- <ol> (liste ordonnée) : Une liste d'éléments affichés dans un ordre particulier, commençant en général par des chiffres ou des lettres. Une balise <li> (list item, soit élément de liste) contient un seul élément.
- <ul> (liste non ordonnée) : Une liste d'éléments qui ne nécessitent pas d'être affichés dans un ordre particulier. Une balise <li> contient un seul élément.
- <q> / <blockquote> : Une citation du texte. Utilisez <blockquote> pour les citations longues, sur plusieurs lignes, et <q> pour les citations plus courtes, d'une seule ligne.
- <em> (accentuation) : Utilisée pour un texte qui doit être mis en valeur.
- <strong> (forte accentuation) : Utilisée pour un texte qui doit être fortement mis en valeur.
- <code> : Bloc de code informatique.
Note : Nous n'avons énuméré que quelques-unes des balises sémantiques HTML les plus courantes. Vous pouvez en utiliser beaucoup d'autres (comme <summary>, <time>, <address>, <video>, etc.) pour faciliter la compréhension du contenu de votre site web. Pour découvrir d'autres éléments HTML sémantiques, consultez la liste de toutes les balises HTML établie par Jaéthème.
Conseils et Meilleures Pratiques pour le HTML Sémantique
Enfin, nous allons aborder quelques conseils d'implémentation HTML basés sur les erreurs courantes que les gens font lorsqu'ils utilisent les balises sémantiques HTML.
N'utilisez pas de Balises Sémantiques HTML pour la Mise en Forme
Même si les navigateurs web appliquent un style à de nombreuses balises sémantiques (par exemple, le texte à l'intérieur d'une balise <a> est généralement bleu et souligné), cela ne veut pas dire que les balises HTML puissent être utilisées pour mettre en forme votre texte.
Autrement dit, de même que vous n'utiliseriez pas une balise <a> pour un texte "sans lien" simplement pour le mettre en bleu et le souligner, vous ne devez pas utiliser les autres balises sémantiques à des fins purement stylistiques.
Voici quelques exemples typiques d'utilisation incorrecte de balises sémantiques :
- Utiliser une balise <h1> à <h6> pour un texte qui n'est pas un titre ou un sous-titre dans le but de modifier la taille de la police
- Utiliser <blockquote> simplement pour indenter un texte qui n'est pas une citation
- Utiliser <strong> ou <em> simplement pour mettre en gras ou en italique un texte qui n'a pas besoin d'être mis en valeur.
Pour la mise en forme, utilisez toujours le CSS.
Utilisez les Balises de Titre en Gardant à l'Esprit l'Aspect Sémantique
Les éléments de titre doivent toujours être disposés dans un ordre hiérarchique.
Par exemple, tous les sous-titres H3 qui suivent un certain H2 doivent être des sous-titres de ce H2.
Ainsi, la structure des titres crée une hiérarchie logique des sujets dans votre contenu et aide les lecteurs et les moteurs de recherche à mieux comprendre et parcourir le texte.
Conseil : Utilisez l'outil Audit de site de Semrush pour identifier les problèmes avec les titres H1, d'autres HTML, et les erreurs de SEO on-page dont votre site pourrait souffrir.
Le même conseil - emboîter les balises en fonction de leur signification - s'applique à toutes les autres balises sémantiques HTML.
Ce qui nous amène au conseil suivant :
Ne Copiez pas la Présentation Visuelle de votre Site
L'implémentation HTML ne doit pas être une simple copie de la présentation visuelle. Elle doit au contraire suivre la structure sémantique de la page.
Examinons cet exemple :
L'utilisation des balises HTML sur le côté gauche est incorrecte car elle laisse entendre que la page contient quatre sujets différents, au lieu d'un sujet et de trois sous-sujets, comme indiqué sur le côté droit.
À droite, nous avons une page correctement construite à l'aide de HTML sémantique. Bien qu'il y ait quatre sections distinctes dans la présentation visuelle de la page, les balises HTML sont imbriquées en fonction des caractéristiques sémantiques du contenu.