La balise HTML <mark>
La balise HTML <mark> surligne du texte comme pertinent dans le contexte actuel. Cas d'usage, attributs et mise en forme avec exemples.
La balise <mark> est l'un des éléments HTML5. Elle marque une portion de texte comme pertinente ou mise en évidence à titre de référence, à la manière d'un surligneur que vous passeriez sur des mots dans une page imprimée. Les navigateurs l'affichent par défaut avec un fond jaune.
Cette page explique ce que <mark> signifie sémantiquement, quand l'utiliser à la place d'un simple <span>, les trois cas d'usage classiques, et comment elle se compare à <strong>, <b> et <em>.
Pourquoi <mark> et non un <span> ?
Un <span> est un conteneur générique sans signification — c'est un simple crochet de style. Vous pourriez donner à un <span> un fond jaune et il semblerait surligné, mais pour un lecteur d'écran, un moteur de recherche ou toute autre machine, ce serait encore du texte ordinaire.
<mark> est différent car il porte une sémantique : il indique au navigateur et aux technologies d'assistance « cette partie du texte est notable ou pertinente dans le contexte actuel. » Le surlignage fait partie du sens du document, pas seulement de son apparence.
Utilisez cette règle pratique :
- Si le surlignage transmet un sens (ce texte correspond à la recherche, ce passage est le point abordé) → utilisez
<mark>. - Si vous souhaitez uniquement un fond coloré à des fins décoratives → utilisez un
<span>avec CSS.
Quand utiliser <mark>
La spécification décrit trois scénarios principaux :
- Surlignage des résultats de recherche. Marquez les mots d'un passage qui correspondent à ce que l'utilisateur a recherché, afin qu'il puisse repérer rapidement la partie pertinente.
- Pertinence dans une citation. Lorsque vous citez un texte écrit par quelqu'un d'autre,
<mark>met en évidence la partie pertinente par rapport à la raison pour laquelle vous la citez — une emphase que l'auteur original n'a pas ajoutée. - Contenu surligné par l'utilisateur. Représente le texte que le lecteur a surligné, à l'image d'une fonctionnalité « surlignage » dans une application de lecture ou d'annotation.
N'utilisez jamais <mark> pour la coloration syntaxique ou un simple coloriages visuel. Pour cela, utilisez plutôt un <span> avec le CSS approprié.
Syntaxe
La balise <mark> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<mark>) et fermante (</mark>).
Exemple de la balise HTML <mark> :
Balise HTML <mark>
<!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 concret : surlignage des correspondances de recherche
Imaginez une page de résultats de recherche où l'utilisateur a recherché le mot highlight. Vous enveloppez chaque mot correspondant dans un paragraphe avec <mark> pour que le résultat soit facile à parcourir. L'exemple ci-dessous personnalise également la couleur de surlignage et ajoute une règle @media print, car le fond jaune par défaut est souvent supprimé lors de l'impression d'une page :
<!DOCTYPE html>
<html>
<head>
<title>Search results</title>
<style>
/* Custom highlight color instead of the default yellow */
mark {
background-color: #c8f7c5;
color: #14532d;
padding: 0 2px;
border-radius: 3px;
}
/* Make sure highlights are still visible when printed */
@media print {
mark {
background-color: transparent;
color: inherit;
text-decoration: underline;
}
}
</style>
</head>
<body>
<p>
You can <mark>highlight</mark> search terms so the user finds them
fast. Each <mark>highlight</mark> marks where the query matched.
</p>
</body>
</html><mark> et les autres balises HTML
Plusieurs éléments HTML ressemblent à <mark> mais signifient des choses différentes. Choisir le bon élément est important pour l'accessibilité et le SEO, car chacun communique une intention distincte aux navigateurs et aux technologies d'assistance.
La balise HTML <strong>
La balise <strong> marque le texte comme ayant une forte importance, une gravité ou une urgence — par exemple une erreur ou un avertissement. Les navigateurs l'affichent en gras par défaut. Utilisez <strong> quand le texte compte, pas seulement quand il doit être mis en évidence.
La balise HTML <b>
La balise <b> affiche également du texte en gras, mais contrairement à <strong>, elle ne porte aucune importance. Elle attire l'attention pour des raisons stylistiques uniquement — comme des mots-clés ou un nom de produit — sans suggérer que le texte est plus significatif.
La balise HTML <em>
La balise <em> met en emphase un mot, à la façon dont vous modulez votre ton de voix en parlant. Elle est affichée en italique par défaut et peut changer le sens d'une phrase.
En résumé : <mark> = pertinent/mis en évidence ici, <strong> = important, <b> = visuellement gras, sans signification, <em> = emphase orale.
Attributs
La balise <mark> n'a pas d'attributs spécifiques — elle accepte uniquement les attributs globaux et les attributs d'événement.
Comment mettre en forme une balise HTML <mark>
Vous pouvez modifier le fond jaune par défaut à l'aide de la propriété CSS background-color :
mark {
background-color: #ffeb3b;
color: #333;
}