Élément HTML : l'élément de marquage du texte

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'élément HTML  représente du texte qui est marqué ou surligné à des fins de référence ou de notation, en raison de la pertinence du passage marqué dans le contexte qui l'entoure.

Dans cet article

Exemple interactif

<p>Résultats de recherche pour «&nbsp;salamandre&nbsp;»&nbsp;:</p>

<hr />

<p>
  Plusieurs espèces de <mark>salamandre</mark> habitent la forêt pluviale
  tempérée du Nord-Ouest Pacifique.
</p>

<p>
  La plupart des <mark>salamandre</mark>s sont nocturnes et chassent des
  insectes, des vers et d'autres petits animaux.
</p>

mark {
  /* Ajoutez vos styles ici */
}

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

Cas d'utilisation typiques de :

Au sein d'une citation (<q>) ou dans un autre bloc (<blockquote>), le texte surligné marque généralement du texte référencé en dehors de la citation ou qui est indiqué pour demander une attention particulière bien que l'auteur ne considère pas ce texte comme important.
Au sein du texte principal, le texte surligné marque du texte d'une pertinence partiulière pour l'utilisateur·ice (par exemple lorsqu'il recherche un terme en particulier).
ne doit pas être utilisé pour de la coloration syntaxique, c'est l'élément qui devra être utilisé.
ne doit pas être confondu avec . L'élément est utilisé afin d'indiquer des fragments de texte importants alors que est utilisé afin d'indiquer des fragments de texte pertinents.

Note : Ne confondez pas avec l'élément ; sert à indiquer un contenu ayant un certain degré de pertinence, tandis que indique des portions de texte importantes.

Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément mark. On peut le rendre annonçable via la propriété CSS content et grâce aux pseudo-éléments ::before et ::after.

css
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;
}

mark::before {
  content: " [Début du marquage]";
}

mark::after {
  content: " [Fin du marquage] ";
}

Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été marqué.

Réglage des styles de texte, reprise (angl.) par Adrian Roselli (2025)
Brève note sur la manière de se démarquer (de manière plus accessible) (angl.) par Vispero (2017)

Exemples

Marquer un texte d'intérêt

Dans ce premier exemple, un élément est utilisé pour marquer un texte dans une citation qui présente un intérêt particulier pour l'utilisateur·ice.

html
<blockquote>
  C'est une période de guerre civile. Des vaisseaux rebelles, frappant depuis
  une base secrète, ont remporté leur première victoire contre le maléfique
  Empire Galactique. Au cours de la bataille,
  <mark>des espions rebelles ont réussi à voler des plans secrets</mark> de
  l'arme ultime de l'Empire, l'ÉTOILE DE LA MORT, une station spatiale blindée
  dotée d'une puissance suffisante pour détruire une planète entière.
</blockquote>

Résultat

Identifier des passages

Cet exemple montre comment utiliser pour marquer les résultats d'une recherche dans un passage.

html
<p>
  C'est une période sombre pour la Rébellion. Bien que l'Étoile de la Mort ait
  été détruite, les troupes <mark class="match">impériales</mark> ont chassé les
  forces rebelles de leur base secrète et les ont poursuivies à travers la
  galaxie.
</p>

<p>
  Évitant la redoutable flotte stellaire
  <mark class="match">impériale</mark>, un groupe de combattants de la liberté
  menés par Luke Skywalker a établi une nouvelle base secrète sur le monde glacé
  et isolé de Hoth.
</p>

Pour distinguer l'utilisation de pour les résultats de recherche d'autres usages possibles, cet exemple applique la classe personnalisée "match" à chaque correspondance.