Html Highlight Text Surligner du texte avec la balise HTML mark

<p> <mark>Highlight</mark> text with HTML &lt;mark&gt; tag</p>

<p> <mark>Default Yellow Highlight</mark></p>

mark { background: red; color: white;}

Sortie

<mark> vs Autres balises HTML de texte

forte

<strong> est utilisée pour indiquer un texte qui a une forte importance que le texte environnant, comme un avertissement ou une erreur. Sémantiquement, son importance. Il apparaît en gras

b

<b> est très similaire à <strong> car il apparaît également en gras. Cependant, contrairement à lui, il ne transmet pas vraiment d’importance et c’est plus une chose stylistique que sémantique.

em

<em> est utilisé pour souligner l’accentuation d’un mot particulier. Il apparaît comme de l’italique

marque

<mark> ne fait que souligner la pertinence d’un certain morceau de texte. Avant l’existence de cette balise, beaucoup ont utilisé em ou strong pour donner au contenu mis en évidence une certaine signification sémantique. Eh bien, c’est terminé ! Si vous devez mettre en évidence, utilisez cette balise 🌟

Pourquoi la balise HTML sémantique est importante

La raison pour laquelle vous n’utilisez pas simplement les balises <div> partout est qu’elles ne sont pas sémantiques. Vous êtes peut-être comme moi lorsque j’ai commencé à apprendre la programmation – qui se soucie d’être sémantiquement correct 🙄. Faux ❌. En fait, les moteurs de recherche comme Google s’en soucient ! Parce que la sémantique transmet un sens à votre site. Lorsque les robots de recherche parcourent votre site, ils savent ce qu’il en est. En d’autres termes, ding ding ding sur votre SEO ou optimisation des moteurs de recherche 🏆

Une autre raison d’être sémantiquement correct est pour l’accessibilité. Un grand nombre d’outils d’accessibilité s’appuient sur la sémantique des balises pour convertir votre site en signification pour l’utilisateur humain qui l’utilise (ie. lecteurs d’écran). Voici une analogie. Souvenez-vous de l’époque où l’ordinateur lisait le texte d’un site. Ça sonnait super robotique et bizarre 🤖. Sans la sémantique appropriée, c’est exactement comme ça. Est-ce que ça marche, bien sûr – mais l’expérience d’écoute est terrible 😱. Cependant, lorsque vous utilisez la sémantique appropriée, c’est comme écouter Siri. Il sonne beaucoup plus humain parce qu’il a toutes les différentes inflexions, les changements de ton, et même savoir quand faire une pause. Et c’est le même type de meilleure expérience que vous pouvez obtenir lorsque vous utilisez des balises HTML sémantiquement correctes 👍

Balise HTML5 et SEO

Je veux cependant souligner une chose.

John Mueller de Google l’a mentionné dans une réponse sur Twitter :

Il est certainement judicieux d’utiliser le HTML5 correctement si vous le pouvez, il n’y a aucun inconvénient pour le référencement à le faire :).

Voici ce que j’en retire. Que vous utilisiez ou non les balises HTML5, cela ne nuira pas à votre classement dans les résultats de recherche Google. Cependant, cela signifie-t-il que vous devez utiliser les balises HTML5. Pas du tout ! Les avantages de l’accessibilité sont toujours là. Et certaines balises HTML5 ont un comportement de navigateur vraiment intéressant et cela ouvre votre utilisateur à une fonctionnalité plus avancée qu’il n’avait pas auparavant 🤩

Préoccupations d’accessibilité

D’accord, j’espère que j’ai réussi à vous transmettre l’importance des balises HTML sémantiques. Et vous pouvez maintenant comprendre comment <mark> ne sert pas simplement à styliser les textes, mais c’est sémantiquement une bonne chose.

Mais ! il y a un certain souci avec son accessibilité. Malheureusement, l’utilisation de la balise <mark> n’est pas annoncée par la plupart des lecteurs d’écran dans ses paramètres par défaut. Mais bonne nouvelle, il existe un moyen de contourner ce problème. Vous pouvez utiliser la propriété de contenu CSS et le pseudo-élément pour faire une annonce.

mark::before { content: " ";}mark::after { content: " ";}/* Hide the text created in the CSS content property */mark::before, mark::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}

Donc ce que le lecteur d’écran va faire ici. Lorsqu’il rencontrera du texte enveloppé dans la balise <mark>, il annoncera « highlight start » suivi du texte à l’intérieur de la balise. puis annoncera « highlight end » une fois la balise de marque terminée.

Mais…

Veuillez noter : si vous avez beaucoup de ces « annonces », cela peut être très verbeux et ajouter des informations inutiles parfois gênantes. Ce qui peut amener certains utilisateurs de lecteurs d’écran à désactiver cette fonctionnalité. Donc, la leçon ici est. « Avec un grand pouvoir vient une grande responsabilité 🕷 ». N’abusez pas de cette technique et ne l’appliquez QUE dans les cas où le fait de NE PAS connaître le contenu mis en évidence peut nuire à la compréhension de l’utilisateur.

Cas d’utilisation de <mark>

La partie amusante maintenant ! Prenons quelques cas d’utilisation pour <mark>:

Cas d’utilisation : résultat de recherche

Voici un cas populaire. Vous pouvez l’utiliser pour mettre en évidence le terme qu’un utilisateur a recherché.

<p>Search Result for "Vue"</p><hr><p><mark>Vue</mark> is a awesome JavaScript framework. <mark>Vue</mark> is awesome. Can you tell I really like <mark>Vue</mark>😆</p>

Sortie

Cas d’utilisation : Citations

C’est génial de proposer des mises en avant pour la citation (<q>) et le bloc de citation (<blockquote>).

<p>According to Samantha, <q>Vue is <mark>AWESOME</mark></q></p>

Sortie

.