<mark> : l'élément de marquage du texte

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 <mark> :

• 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 (par exemple lorsqu'il recherche un terme en particulier).
• <mark> ne doit pas être utilisé pour de la coloration syntaxique, c'est l'élément <span> qui devra être utilisé.
• <mark> ne doit pas être confondu avec <strong>. L'élément <strong> est utilisé afin d'indiquer des fragments de texte importants alors que <mark> est utilisé afin d'indiquer des fragments de texte pertinents.

Accessibilité

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.

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é.

• Brève note sur l'accessibilité du marquage | The Paciello Group ^(angl.)
• Ajuster les styles de texte de niveau | Adrian Roselli ^(angl.)

Exemples

Marquer un texte d'intérêt

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

<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 <mark> pour marquer les résultats d'une recherche dans un passage.

<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 <mark> pour les résultats de recherche d'autres usages possibles, cet exemple applique la classe personnalisée "match" à chaque correspondance.

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs