LinkedIn Link to LinkedIn Twitter Link to Twitter

Structurer une page HTML avec du code sémantique

Mis à jour le 30/08/2022 | Publié le 08/08/2022 | 0 commentaires

Une balise HTML sémantique permet d’indiquer aux moteurs de recherche comme Google ou Bing une information précise et claire sur les différentes sections d’une page Web.

Depuis HTML5 il est possible de baliser sémantiquement les parties de votre contenu.

Définition d’une balise HTML sémantique

Une balise HTML sémantique transfère une information sémantique pour les robots d’explorations, elle donne une indication. Par exemple, une balise <div> ou <span> peut être utilisée dans n’importe quelles choses lors de la construction d’une page Web. Alors qu’une balise HTML sémantique à un but précis, par exemple la balise <article> à été ajoutée pour permettre de délimiter les zones précises de votre site Web.

Pourquoi utiliser un balisage HTML sémantique ?

Certes pour les utilisateurs, il est facile de distinguer le menu du contenu, la barre latérale des publicités ou un bas de page (footer). Pour ce qui est des robots d'explorations, c'est-à-dire les crawlers des moteurs de recherche, ce n'est pas du tout aussi simple. En fournissant une structure claire, vous améliorez la compréhension des moteurs de recherche et votre budget d’exploration. On parle alors d’optimisation du référencement naturel (SEO).
Bonnes pratiques pour le HTML sémantique et le SEO

Les balises HTML sémantiques pour structurer une page Web

Les balises sémantiques peuvent fournir des informations précises aux crawlers que ce soit pour les différentes parties de votre pages, ou des sens sémantiques à l'intérieur du contenu comme la balise <strong> permettant d’indiquer qu’il s’agit d’une information importante.

L'entête du site avec la balise <header>

L’entête d’un site Web est définie avec la balise <header>. Il y figure généralement le logo et le menu principal du site Web.

Elle permet d’indiquer aux robots d'indexation que les informations présentes dans cette balises seront récurrentes d'une page à l'autre et ne sont ainsi pas représentatives de ce que parle la page.

Les menus de navigation avec <nav>

La balise <nav> indique un menu de navigation. Une balise nav peut être placée en en-tête mais également à l'intérieur d’autre balise HTML si votre site Web dispose de plusieurs menus de navigation. Par exemple un menu dans le pied de page ou dans une barre latérale.

Le contenu principal avec <main>

Cet élément encadre le contenu principal de la page. C'est dans cette partie que vous allez coder le contenu du site internet (toute la page Web hors en tête et footer), elle contiendra ainsi les balises HTML telles que <section> et <article> ou encore les balises <aside>.

Les contenu avec <article>

La balise <article> permet d’indiquer l’élément de contenu le plus important de la page Web.

Exemple de code sémantique avec <article> :

<main>
<article>
<h1></h1>
Contenu
[ Contenu supplémentaire lié au contenu de l’article]
</article>
[Contenu supplémentaire NON lié au contenu de l’article]
</main>

Créer des structures précises avec <section>

L’une des seules bonnes utilisation de <section> est à l’intérieur de la balise <article>.

Si l'article possède des morceaux de texte qui ont une signification en tant que blocs autonomes d’informations. La balise <section> peut dire à la machine que ce bloc de contenu peut être indexé en tant que fragment. Ainsi, une balise <section> peut se retrouver à la position 0 dans les résultats de recherche Google.

Avoir un bon code ne permet pas d’être en 1ere page de Google, mais si vous avez l’autorité et la légitimité nécessaire, un bon code dans ce contexte sera comme la cerise sur le gâteau. En ayant une bonne structure de code sémantique, les moteurs de recherche pourront plus facilement chasser les parties qui l'intéressent pour enrichir ses résultats de recherche.

Exemple de code sémantique avec <section> :

<article>
<h1>SEO</h1>
<p>Définition du SEO</p>
<section>
<h2>Comment faire du SEO ?</h2>
<p>Bla bla bla à propos de H2</p>
</section>
<section>
<h2>Glossaire SEO</h2>
<p>Définition des mots employés dans le jargon SEO</p>
</section>
<section>
<h2>Comment fonctionne les algorithmes ?</ h2>
<p>Bla bla bla à propos de H2</p>
</section>
</article>

Le contenu annexe avec <aside>

Les contenus présents au sein d’une balise <aside> sera tout contenu qui ne parle pas du sujet principal dont traite la page. Il peut être placé dans une balise <article> ou <main> en informant les robots que ce bloc de texte est un contenu annexe. Par exemple un CTA en plein milieu d’un billet de blog.

Le pied de page avec <footer>

La balise footer ou pied de page en français est délimitée par cette balise. Elle contient elle aussi le contenu récurrent d'une page comme <header>, comme par exemple le logo, les liens de navigation ou encore les informations légales.

Les balises sémantiques pour structurer un contenu

Les titres avec les balises <h1> à <h6> (<Hn>)

Les balises titres Hn indiquent les grands titres de votre page Web. Elles permettent elles aussi de structurer votre contenu et votre message. Un sous titre doit entrer en profondeur d’un autre sous titre. Ainsi, il n’y a aucune raison de faire une balise <h3> si elle ne parle pas en détail d’un élément d’un <h2>. Ainsi, il est plutôt rare d’utiliser les balises <h5> et <h6> car il est rare d'aller aussi loin dans le détail, mais si cela est cohérent, faites le.

Par simplicité, nous disons une et une seule balise titre <h1> par page. Mais, si votre page à plusieurs sujets, ils peut être acceptable d’en placer plusieurs si celle-ci sont placé dans des balises sémantique <section> différentes. Mais si vous ne savez pas ce que vous faites, respectez la consigne de une et une seule balise H1 par page.

Voir toutes les balises importantes pour le SEO.

Listes de descriptions <dl> <dt> <dd>

Comme son nom l’indique, les listes de descriptions permettent de structurer une liste.

Exemple :

<dl>
<dt>Prénom</dt>
<dd>Stan</dd>
</dl>

Les citations avec <blockquote> et <cite>

<blockquote> est une balise sémantique permettant d’indiquer clairement que vous mentionnez une citation. La balise <cite> va de pair car elle permet d’indiquer de qui provient la citation.

<cite> doit être placé à l'intérieur de la balise <blockquote>.

Formater du code avec <code> et <pre>

La balise <code> permet d’indiquer aux moteurs de recherche (et utilisateurs) qu’il s’agit d’un extrait de code.

La balise <pre> permet d’indiquer qu’il s’agit de lignes de code préformaté. Un code préformaté signifie que l’extrait utilisé doit conserver les tabulations, les espaces et les sauts de lignes.

Le balisage sémantique et l’optimisation du référencement (SEO)

Un balisage sémantique clair et précis permet essentiellement à faire comprendre aux robots d’explorations le sens d’une page sans faire basculer la thématique.

Par exemple, si votre page redirige vers d’autres zones de votre site Web qui n’est pas relatif au sujet que la page traite, une balise <aside> dans un menu de navigation peut être intéressante. Il s’agit parfois de quelque chose que l’on doit actionner après un audit SEO technique si le site à été mal construit.

Aussi, clarifier les éléments sémantiques auraient pu ou pourraient permettre à Google de mieux identifier les zones de votre site pour un modèle de surfeur raisonnable plus précis (PageRank - Topic-Sensitive PageRank).

Pensez à donner de la vie avec des balises sémantiques comme des tableaux HTML, les balises gras et italiques. Tout ce que vous pouvez faire pour aider Google à comprendre l'ensemble de votre site et de vos pages est une bonne chose. Mais cela ne dit pas à Google que votre page ou votre site est de qualité en s'assurant d'utiliser une bonne structure HTML sémantique.

Je ne vois pas cela comme un signal de qualité, mais cela nous aide certainement à mieux comprendre les pages, afin que nous puissions mieux les afficher pour les requêtes appropriées dans la recherche.
John Muller (@JohnMu)

Ce qu’un débutant fait, et que vous ne devez pas faire

S’il n'y a pas d'éléments HTML sémantiquement pertinents, utilisez CSS ou les quelques éléments HTML véhiculent un style visuel sans sémantique. Mais surtout, n’utilisez pas de HTML sémantique pour habiller votre page Web si ce n’est pas cohérent. Par exemple, n’utilisez pas un tableau pour construire un menu plus facilement.

Pour éviter toutes contradictions, suivez ces directives de Google :

  • N'utilisez pas de tableaux pour la mise en page ; utilisez plutôt le CSS de votre site pour mettre en page la page.
  • N'utilisez pas les éléments d'en-tête (tels que <h1>et <h2>) pour styliser visuellement le texte ; utilisez ces éléments uniquement pour les en-têtes structurés de manière hiérarchique et utilisez CSS pour le style visuel.
  • La balise <em> indique l'emphase, pas l'italique en tant que tel. Ne l'utilisez pas pour mettre en italique quelque chose qui n'est pas destiné à être souligné ; à la place, utilisez <i> pour les italiques non accentués. (L’emphase est un ton, style déclamatoire abusif ou déplacé).
  • La balise <strong> indique une importance forte, mais pas du gras en tant que tel. Pour mettre en gras un mot qui ne mérite pas une grande importance, utilisez l' élément <b>.
  • La balise <br> est destiné "uniquement aux sauts de ligne qui font réellement partie du contenu, comme dans les poèmes ou les adresses". Ne l'utilisez pas pour ajuster l'espacement entre les lignes. Au lieu de cela, utilisez des éléments comme <p> pour marquer sémantiquement le texte et CSS pour ajuster l'espacement des lignes.

Bonnes pratiques CSS :

Évitez de styliser les balises sémantiques, utilisez à la place des classes.

Exemple HTML :

<h1>Titre H1</h1>

Le CSS :

h1 {font-size:18px;}

Est une mauvaise pratique. A la place, privilégiez quelque chose comme :

<h1 class=”titre”>Titre H1</h1>

Le CSS :

.titre {font-size:18px;}

Les balises sémantiques peuvent être utiles pour un développeur front end afin de voir plus clair dans son code, mais il doit surtout comprendre qu’il doit le faire pour que sa page Web soit compréhensible pour les robots d’exploration et non pour que le navigateur stylise automatiquement sa page Web.

Aller plus loin avec les microdonnées et les données structurées

Un vocabulaire commun (schema.org) à permis de simplifier l’utilisation des micro-données. Ceux-ci permettent de fournir des informations supplémentaires et précises sur le contenu d’un site ou d'une page.

Il existe deux méthodes principales concernant les microdonnées :

  • Les micro-données en balisage HTML (itemscope).
  • Les micro-données en script JSON-LD.

Grâce aux microdonnées, un site peut avoir l’affichage des résultats enrichis sur Google, Bing ou Yahoo.

Résumé :

Toutes les balises HTML sémantiques ne sont pas présentes ici. Effectivement les balises comme <adress> <data> <sub> sont à mon sens inutiles. D’une part parce que Google n’a pas besoin d’une balise adress pour comprendre que vous faites références à une adresse, d’autre part parce que les référenceurs ont abusé des métadonnées et que désormais Google ne prend pas en compte ce genre de balise. Il existe tout de même les données structurées (schema.org) si vous souhaitez spécifier des détails précis aux moteurs de recherche comme pour indiquer l’adresse de votre entreprise.

Auteur

Stan De Jesus Oliveira
Propriétaire et fondateur de createur2site

Stan De Jesus Oliveira est le propriétaire de createur2site, il accompagne les entreprises dans leur création de site web, le Web Design et le référencement naturel SEO.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.