Dans cette leçon, nous allons voir comment indiquer aux navigateurs et surtout aux moteurs de recherche quelles parties de texte sont plus importantes que d’autres et doivent être considérées en priorité.
La problématique des niveaux d’importance des textes
Pour comprendre la problématique des niveaux d’importance des textes, il faut avant tout que vous ayez des notions en optimisation du référencement (SEO) ou du moins que vous compreniez les enjeux liés au SEO.
Lorsqu’on crée un site, en général, on veut que ce site soit visité. Pour qu’il soit visité, l’un des meilleurs moyens est que les pages de notre site ressortent parmi les premiers résultats lorsqu’un utilisateur fait une recherche sur un moteur de recherche (comme Google) sur un sujet abordé dans nos pages.
Les techniques d’optimisation que l’on va pouvoir mettre en place pour faire en sorte que nos pages soient les mieux classées possibles dans Google (et dans les autres moteurs de recherche) par rapport à certains mots clefs sont regroupées sous le terme « SEO ».
Le contenu d’une page est aujourd’hui le critère SEO le plus important pour Google puisque le but de Google est de fournir la réponse la plus pertinente pour chaque requête de ses utilisateurs.
En ce sens, il va donc falloir porter une attention toute particulière à la manière dont on va rédiger chaque page si on veut que celles-ci soient optimisées. Ainsi, il va avant tout falloir cibler un mot clef principal pour chaque page et écrire à chaque fois du contenu pertinent par rapport à ce mot clef.
En écrivant nos textes, souvent, certaines parties de contenu vont être plus importantes que d’autres et on va donc vouloir que les moteurs de recherche les remarquent en priorité et les traitent avec plus d’importance que le reste de nos textes.
On va pouvoir faire cela grâce à différents éléments HTML qui vont nous servir à indiquer des niveaux d’importance relatifs pour certaines parties de notre contenu.
Indiquer qu’un texte est très important avec l’élément strong
L’élément HTML strong va être utilisé pour signifier qu’un contenu est très important et doit être considéré comme tel par les moteurs de recherche (et les navigateurs).
En résultat, le navigateur affichera par défaut le contenu à l’intérieur de l’élément strong en gras. Encore une fois, n’utilisez pas strong pour mettre un texte en gras ! Utilisez strong pour marquer un texte qui vous semble très important. Nous utiliserons le CSS pour gérer le poids d’un texte.
https://codepen.io/alegorix/pen/WNGKRbW
Mettre un texte en emphase avec l’élément em
L’élément HTML em (pour emphasis ; « emphase » ou « accentuation » en français) va être utilisé pour mettre des termes en emphase.
On va pouvoir utiliser cet élément pour souligner un contraste par exemple ou une définition. Concrètement, les moteurs de recherche vont accorder une importance moins grande aux textes dans les éléments em qu’à ceux dans strong mais une importance plus grande à ces textes qu’à des simples paragraphes.
Le résultat visuel par défaut de l’emphase est la mise en italique du texte contenu dans l’élément.
https://codepen.io/alegorix/pen/OJRwWNa
Mettre un contenu pertinent en relief avec l’élément mark
L’élément mark va être utilisé pour mettre en relief certains textes qui vont être pertinents dans un certain contexte. Le texte mis en relief n’est pas forcément important en soi par rapport au sujet de l’article mais va être pertinent pour un certain utilisateur dans un certain contexte.
Il est difficile d’illustrer l’intérêt de cet élément pour le moment car celui-ci va souvent être utilisé de manière dynamique et avec des langages dynamiques donc comme du JavaScript.
Imaginons par exemple que votre site possède un champ de recherche. Lorsque l’utilisateur recherche un terme dans une page, ce terme en particulier va donc être important pour lui et on va donc vouloir le mettre en relief par rapport aux autres.
L’élément de marquage à utiliser dans cette situation-là est l’élément mark dont le rôle est encore une fois d’indiquer la pertinence d’un certain texte en fonction d’un contexte.
https://codepen.io/alegorix/pen/vYXagXj
De manière pratique, toutefois, l’élément mark est relativement peu utilisé.