Aller au contenu

Balise HTML <mark>

La balise <mark> fait partie des éléments HTML5. Elle permet de marquer une partie du texte qui a de l'importance. Elle peut être utilisée pour mettre en évidence du texte afin de souligner une emphase, pour surligner des termes de recherche dans les résultats afin d'en fournir le contexte, ou encore pour distinguer un nouveau contenu ajouté par l'utilisateur en l'affichant différemment.

Dans Chrome et Firefox, le contenu de la balise est surligné en jaune, mais cela peut être modifié à l'aide de la propriété CSS background-color.

TIP

La balise <mark> ne porte pas de sémantique structurelle, mais elle transmet bien une notion d'importance ou d'urgence aux technologies d'assistance. Pour indiquer l'importance du texte marqué, utilisez les balises <strong> ou <em>.

TIP

N'utilisez jamais la balise <mark> pour la coloration syntaxique. À cette fin, vous pouvez utiliser la balise HTML <span> avec les propriétés CSS appropriées.

La balise <mark> peut être utilisée pour indiquer une partie spécifique du contenu pertinente par rapport à l'activité actuelle de l'utilisateur, comme par exemple mettre en évidence les mots correspondant à une recherche.

Syntaxe

La balise <mark> s'utilise par paires. Le contenu est écrit entre la balise d'ouverture (<mark>) et la balise de fermeture (</mark>).

Exemple de la balise HTML <mark> :

Balise HTML <mark>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
  </body>
</html>

Résultat

Exemple de la balise mark

La balise <mark> et les autres balises HTML

Une liste de certains éléments HTML présentant des similitudes avec l'élément <mark> est présentée ci-dessous. Passons en revue chacun d'entre eux.

La balise HTML <strong>

Vous pouvez utiliser la balise <strong> pour indiquer un texte ou une partie du texte qui est très important. Par exemple, une erreur ou un avertissement. Il apparaîtra en gras.

La balise HTML <b>

La balise <b> présente quelques similitudes avec <strong>. Elle apparaît également en gras. La principale différence est que l'élément <b> n'indique aucune importance. Il est utilisé à des fins de mise en forme.

La balise HTML <em>

Nous utilisons la balise <em> pour souligner l'emphase sur un mot spécifique. Elle apparaît en italique.

Attributs

La balise <mark> prend en charge les Attributs globaux et les Attributs d'événement.

Comment styliser une balise HTML <mark>

Vous pouvez modifier l'arrière-plan jaune par défaut à l'aide de la propriété CSS background-color :

css
mark {
  background-color: #ffeb3b;
  color: #333;
}

Pratique

Quel est l'objectif de la balise HTML <mark> ?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.