Une page de résultats de recherche affiche des extraits d'articles, et le terme tapé par l'utilisateur ressort en surbrillance jaune au milieu du texte, pour que l'oeil le retrouve immédiatement sans relire toute la phrase.
<mark> sert exactement à ça : signaler qu'un passage est pertinent dans le contexte précis où il apparaît, pas décorer un mot au hasard parce qu'une couleur de fond ferait joli sur la page.
Définition
<mark> encadre un passage de texte marqué comme pertinent ou intéressant dans son contexte actuel, sans préciser pour quelle raison exacte. Le navigateur l'affiche par défaut avec un fond jaune et un texte noir, mais ce style reste une convention visuelle, pas la définition de la balise : le sens réel est que ce passage compte ici, maintenant, pas qu'il serait important en toute circonstance.
Cette nuance distingue <mark> d'une balise comme <strong>, qui porte une importance intrinsèque au contenu, valable partout où le texte est lu. <mark> porte une pertinence liée à une situation : une recherche, une citation reprise ailleurs, un passage précis visé par une relecture.
Exemple concret : surligner un terme de recherche
Sur une page de résultats, chaque extrait affiché reprend le texte original tel quel, à l'exception du ou des mots correspondant à la recherche, entourés de <mark>.
<p>
Le tableau de bord affiche votre <mark>progression</mark> quotidienne et
hebdomadaire.
</p>Si l'utilisateur recherche un autre terme le lendemain, le passage entouré change : la marque suit la pertinence du moment, elle n'est pas fixée une fois pour toutes dans le contenu d'origine.
Différence avec ins et del
<ins> et <del> servent à un suivi de modification : un passage ajouté ou retiré d'un document, souvent affichés respectivement soulignés et barrés. Ils racontent l'histoire d'une édition. <mark> ne raconte aucune histoire d'édition : le texte encadré n'a été ni ajouté ni retiré, il est simplement mis en avant dans sa version actuelle.
| Balise | Ce qu'elle signale |
|---|---|
| <mark> | Un passage pertinent dans le contexte actuel |
| <ins> | Un texte ajouté depuis une version précédente |
| <del> | Un texte retiré depuis une version précédente |
Sémantique et accessibilité
La plupart des lecteurs d'écran ignorent <mark> par défaut, mais certains, correctement configurés, annoncent le début et la fin d'un passage surligné. Cette annonce reste inutile si le texte autour ne dit rien du contexte : mieux vaut ne jamais faire reposer la compréhension sur la seule couleur, invisible pour qui n'affiche pas la mise en forme.
Un piège classique consiste à utiliser <mark> uniquement pour appliquer une couleur de fond décorative, sans lien avec une recherche, une citation ou un contexte précis. Ce détournement casse le contrat sémantique de la balise et n'apporte rien aux technologies d'assistance, qui elles ignorent la couleur. Pour une simple mise en valeur visuelle sans rapport avec une pertinence contextuelle, une classe CSS suffit amplement.
Cas d'usage et bonnes pratiques
Au-delà de la recherche, <mark> convient pour signaler la phrase clé d'une citation longue reprise ailleurs, ou le passage exact visé par un commentaire de relecture. Elle garde son sens tant que le passage entouré reste lié à une situation précise plutôt qu'à un jugement permanent sur son importance.
Believemy l'utilise par exemple dans son glossaire, pour faire ressortir le mot recherché au milieu d'un extrait de définition affiché dans les résultats.
Questions fréquentes
<mark> et strong servent-ils à la même chose ?
Non, ils répondent à deux questions différentes. strong affirme qu'un passage a une importance forte, valable partout où il est lu. <mark> signale une pertinence liée à un contexte précis, comme une recherche, qui change selon la situation. Les deux peuvent d'ailleurs coexister sur le même passage sans se contredire.
Le fond jaune par défaut est-il obligatoire ?
Non, ce style vient de la feuille de style par défaut du navigateur et se personnalise entièrement en CSS, sur la couleur de fond comme sur celle du texte. Ce qui reste non négociable, c'est le sens de la balise : un passage pertinent dans son contexte, pas n'importe quelle couleur choisie pour l'esthétique.
Peut-on utiliser plusieurs <mark> dans un même paragraphe ?
Oui, rien ne l'interdit, et c'est même l'usage courant sur une page de résultats de recherche où plusieurs occurrences du même terme apparaissent dans un extrait. Chaque occurrence reçoit sa propre balise, indépendamment des autres, sans limite de nombre fixée par la spécification.