La structure d’une page est aujourd’hui une étape importante dans la compréhension des textes par des machines. La structuration de l’information avec le code s’est modifiée au fil du temps et de notre utilisation grandissante. La version HTML5 a introduit la notion de balise sémantique pour mieux structurer une page HTML afin d’aider les machines à mieux comprendre l’information présente sur une page web.
C’est une étape très importante pour le référencement (SEO), le moteur de recherche est de mieux en mieux capable de comprendre le contenu d’une page web pour présenter le résultat le plus pertinent aux internautes.
Découvrez dans cet article comment se servir de HTML 5 pour améliorer votre référencement naturel et notre visibilité en ligne.
Qu’est-ce qu’une balise HTML ?
HTML est un langage de balisage qui permet de structurer et de présenter le contenu à l’aide de différentes balises. Le navigateur de notre ordinateur ou notre smartphone lit les balises pour afficher les textes, les images, audio, vidéo, etc.
Par exemple, la balise <p> permet de dire qu’il s’agit d’un paragraphe, <nav> le menu de navigation, <Hn> les titres, etc.
En structurant le mieux possible vos contenus avec le maximum d’informations sémantiques, vous augmentez votre chance de vous positionner au mieux dans les résultats de recherche avec des mots clés ciblés.
Pour répondre à notre requête, le moteur de recherche doit comprendre d’abord la question, puis nous afficher un résultat cohérent. Si pour les humains, il est facile de comprendre le texte, il faut donner plus d’informations aux robots de moteur de recherche avec le code pour l’aider à comprendre l’information.
Pour transmettre plus d’informations à la machine, HTML5 a ajouté certaines balises sémantiques dans sa dernière version.
Qu’est-ce que HTML5 sémantique ?
Le rôle d’une balise HTML est d’afficher le contenu demandé par l’utilisateur grâce au navigateur web. Depuis la version HTML5 les balises sémantiques viennent apporter plus d’infos sur ce qu’elles contiennent.
Elle apporte une indication à la machine pour aider à comprendre le sens et la structure de la page. La machine comprend plus facilement les éléments présents dans le contenu. Ces balises facilitent donc la communication avec la machine.
Pourquoi utiliser les balises sémantiques HTML ?
Les balises sémantiques, en particulier, aident les moteurs de recherche à comprendre le sens d’une page et à l’indexer en conséquence. Par exemple, la balise <hn> est utilisée pour désigner un titre, tandis que la balise désigne <p> un paragraphe. En utilisant correctement ces balises, les développeurs peuvent s’assurer que leurs pages sont indexées et classées avec précision par les moteurs de recherche. En outre, les balises sémantiques peuvent également contribuer à améliorer la lisibilité d’une page pour les utilisateurs.
Pour des raisons SEO
En structurant votre contenu dans des balises sémantiques, vous augmentez votre chance de vous positionner en haut de la SERP. Ces balises vont donner des indications aux robots d’indexations sur ce que la balise contient. L’utilisation de ces balises ne peut qu’être bénéfique pour votre référencement naturel.
Pour l’accessibilité
L’accessibilité est devenue un élément important à prendre en compte dans la création web. Et l’utilisation des balises sémantiques peut améliorer cette accessibilité. Pour donner la possibilité de lire aux plus de 1 million de personnes en situation de handicap visuel, nous pouvons adapter notre site web grâce au code, pour être lu par un lecteur d’écran.
En définissant clairement la structure d’une page, les balises sémantiques facilitent la lecture et la compréhension du contenu par les utilisateurs. Elles jouent donc un rôle important à la fois dans le référencement et dans la facilité d’utilisation.
Pour faciliter la maintenance du code
Tout bon développeur web sait que l’utilisation des bonnes balises HTML est essentielle pour créer un site web bien structuré. Non seulement ces balises aident à définir le contenu d’une page, mais elles jouent également un rôle important dans la maintenance du code. Il sera plus facile de s’y retrouver quelques semaines ou mois plus tard.
Avant ces balises les développeurs étaient obligés d’utiliser la balise <div> qui ne permettait pas de structurer la page. Par exemple, si le développeur souhaite changer l’apparence et la présentation des articles, il suffit de modifier le CSS en ciblant la balise <article>. Cela fait gagner un temps précieux pour les intégrateurs et développeurs.
Quelques exemples de balises sémantiques :
Balise « nav »
C’est une balise qui contient les informations sur les éléments de navigation, le menu, etc. Il s’agit des liens qui envoient sur d’autres pages du site web. Sur une page HTML, on peut avoir plusieurs balises de navigation.
ds<nav>
<ul>
<li><a href="#Accueil">Accueil</a></li>
<li><a href="#Apropos">À propos</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>Balise « header »
Balise <header> affiche les contenus introductifs du haut de la page comme le menu de navigation, le logo, le champ de recherche, le nom de l’auteur, etc. On peut trouver également la balise <nav> dans une balise <header>. Une balise <header> peut être descendant d’une balise <article>, section, aside, etc.
<header>
<h1>Le titre de mon site</h1>
<img src="mon-logo.png" alt="Le logo de mon site">
</header>Balise sémantique « article »
Cette balise ajoute des données structurées pour présenter un article et pourrait améliorer la présence sur les moteurs de recherche. Les données et les balises qui sont liées à la balise <article> peuvent aider le moteur de recherche à mieux comprendre le contenu.
Une page peut avoir plusieurs balises articles, notamment sur la page de blog.
Google vous explique l’ajout de données structurées pour les articles
<article>
<header>
<h2>Mon article</h2>
<p>Publié le mercredi <time datetime="2022-08-31">31 août 2012</time> par John Smith</p>
</header>
<p>Quelques phrase sur l'article en question</p>
<p><a href="https://example.com/mon-article/">Lire la suite…</a></p>
</article>Balise sémantique « section »
La balise section HTML est un excellent moyen de regrouper sémantiquement du contenu connexe sur une page Web. En utilisant la balise section, vous pouvez donner à vos pages Web une structure plus propre et permettre aux navigateurs et aux moteurs de recherche de comprendre plus facilement le contenu de votre page.
En outre, la balise section peut être utilisée pour créer des sections dans un document, comme un chapitre dans un livre ou un article dans un magazine. En utilisant la balise section, vous pouvez rendre votre contenu plus accessible et plus facile à naviguer.
<h1>Mon titre</h1>
<section>
<h2>Introduction</h2>
<p>Cela ressemblait aux gros ordinateurs que David avait pu voir dans des films de science fiction. Beaucoup de petites lumières indiquaient qu’il était en fonction...</p>
</section>Balise sémantique « footer »
La balise HTML footer est utilisée pour définir le pied de page d’un document ou d’une section.
Ils contiennent généralement des informations telles que le nom de l’auteur de la page, des informations sur les droits d’auteur, des coordonnées et d’autres petits morceaux de texte, des liens de navigation et des informations de copyright, etc.
La balise footer doit être utilisée à l’intérieur de la balise body. Elle peut contenir des en-têtes, des paragraphes, des listes, des images et d’autres éléments en ligne. La balise footer peut également être utilisée pour envelopper plusieurs éléments dans un conteneur de pied de page.
Le rôle des balises sémantiques de bas de page est d’améliorer l’accessibilité des pages Web.
Les lecteurs d’écran lisent souvent le contenu d’un pied de page avant le contenu principal de la page. En utilisant des balises de pied de page sémantiques, les développeurs peuvent s’assurer que toutes les informations importantes d’un pied de page sont présentées de manière accessible.
<footer>
<img src="mon-image.png">
<p>©2022 Webalia</p>
</footer>Balise « main »
Balise main représente l’information principale de la page et est une balise purement informative. Il ne peut y avoir qu’une seule balise <main> dans un document HTML. Il s’agit du texte unique dans le document.
Utilisation de la balise main permet un meilleur découpage d’une page avec les autres balises sémantiques. C’est bien cette balise qui remplace l’ancienne balise role=main.
<body>
<header>Mon Header</header>
<main>
<p>Vous pouvez incorporer n'importe quel élément dans les balises "main"</p>
<p>Elle représente la partie la plus importante du body</p>
</main>
</body>Balise « aside »
Comment les autres balises sémantiques, la balise <aside> a une signification sémantique particulière. Cette balise permet de faire un découpage plus précis de la page. Le contenu qui se trouve à l’intérieur de cette balise est une information complémentaire ou qui n’est pas forcément en lien direct avec le contenu, mais qui peut apporter des informations supplémentaires.
<aside>
<p>La balise "aside" vous permet d'ajouter du contenu, qui n'est pas spécialement relié au contenu principal de votre page.</p>
</aside>Les autres balises HTML importantes pour le SEO
Les balises meta
Les métabalises HTML sont des balises utilisées dans la section d’en-tête d’un document HTML. Elles fournissent des informations sur le document, telles que le titre, l’auteur, les mots-clés et la description du document. Les métabalises ne sont pas visibles pour les utilisateurs, mais elles sont utilisées par les moteurs de recherche pour explorer et indexer un site Web. Elles sont utilisées par les moteurs de recherche pour aider à déterminer le sujet d’une page Web et sur ce qu’elle contient.
Par exemple, la balise <title> décrit le but de la page. C’est une des balises principales qui est scannée lors de l’indexation d’une page par un moteur de recherche. Elle est placée à l’intérieur de la balise <head>.
La balise meta description est description plus détaillée d’une page qui a le rôle d’inciter les gens à cliquer sur le résultat afficher dans le SERP.
Pour conclure : pensez à améliorer votre SEO grâce aux balises HTML
Utiliser les balises sémantiques HTML5 sur vos pages web aide Google à comprendre la structure et l’information présentes sur le document. Elles jouent également un rôle dans l’optimisation de la page pour le SEO, donc les utiliser correctement est fortement conseillé. Cela ne pourrait être que bénéfique pour votre stratégie SEO et votre visibilité sur le web.
