Skip to content
Skip to content
Menu
Info Cafe
Info Cafe

Html Highlight Text Surligner du texte avec la balise HTML mark

By admin on février 28, 2021

Code Tidbit by SamanthaMing.com

Si jamais vous avez besoin de marquer du texte dans un paragraphe, mieux vaut utiliser la balise <mark>. C’est la version HTML d’un surligneur jaune. J’ai toujours utilisé une balise <span> avec un peu de style CSS saupoudré dessus, sans réaliser que cette option plus sémantique existait. HTML5 est rempli de toutes sortes de bonnes choses, n’est-ce pas 😆

<p> <mark>Highlight</mark> text with HTML &lt;mark&gt; tag</p>
Entrer dans le mode plein écran Quitter le mode plein écran

Par défaut <mark> styling

La couleur de fond par défaut de <mark> est le jaune.

<p> <mark>Default Yellow Highlight</mark></p>
Entrer dans le mode plein écran Quitter le mode plein écran

Sortie

.Code Sample OuptputÉchantillon de code Ouptput

Style personnalisé <mark> avec CSS

Bien sûr, comme toute balise HTML de texte, vous pouvez appliquer un style personnalisé avec CSS. Vous pouvez y penser de manière similaire à la façon dont vous styliseriez une balise <p>.

mark { background: red; color: white;}
Entrer dans le mode plein écran Quitter le mode plein écran

Sortie

Échantillon de code 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;}
Entrer en mode plein écran Quitter le mode plein écran

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>
Entrer en mode plein écran Sortir en mode plein écran

Sortie

Échantillon de code Ouptut

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>
Entrer en mode plein écran Quitter le mode plein écran

Sortie

Sortie de l'échantillon de code

.

Navigation de l’article

Faire le plein : Les 60 minutes de privation sensorielle d’une écrivaine
Trouver un formulaire juridique en quelques minutes

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles récents

  • Firebush (Français)
  • 9 Meilleures vitamines et suppléments pour chiens pour une santé améliorée
  • Prévision des taux des CD pour 2021 : Les taux resteront probablement bas, mais ils pourraient augmenter plus tard dans l’année
  • Comment structurer la documentation du système de management de la qualité
  • Douleur pelvienne chronique et prostatite : symptômes, diagnostic et traitement
  • Croustillant aux baies mélangées
  • Recette de pudding au chocolat à faible teneur en glucides
  • Jeux et activités sains pour les enfants | Informatique en ligne de l’UIC
  • Wheat Ales (American)
  • Les bienfaits de l’allaitement maternel au-delà d’un an

Méta

  • Connexion
  • Flux des publications
  • Flux des commentaires
  • Site de WordPress-FR

Archives

  • mars 2021
  • février 2021
  • janvier 2021
  • décembre 2020
  • DeutschDeutsch
  • NederlandsNederlands
  • EspañolEspañol
  • FrançaisFrançais
  • PortuguêsPortuguês
  • ItalianoItaliano
  • PolskiPolski
  • 日本語日本語
©2021 Info Cafe | WordPress Theme by SuperbThemes.com