L'élément HTML <mark> représente un texte marqué ou surligné à cause de sa pertinence dans le contexte. Il peut par exemple être utilisé afin d'indiquer les correspondances d'un mot-clé recherché au sein d'un document.

Catégories de contenu Contenu de flux, contenu phrasé, contenu tangible.
Contenu autorisé Contenu phrasé.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu phrasé.
Rôles ARIA autorisés Tous les rôles sont autorisés.
Interface DOM HTMLElement

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

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

Exemples

Exemple simple

HTML

<p>
  L'élément &lt;mark&gt; est utilisé pour
  <mark>mettre en avant</mark>
  du texte pertinent dans le contexte.
</p> 

Résultat

Identifier des passages

Dans cet exemple, on utilise <mark> pour marquer les résultats d'une recherche dans un passage.

HTML

<p>It is a dark time for the Rebellion. Although the Death
Star has been destroyed, <mark class="match">Imperial</mark>
troops have driven the Rebel forces from their hidden base and
pursued them across the galaxy.</p>

<p>Evading the dreaded <mark class="match">Imperial</mark>
Starfleet, a group of freedom fighters led by Luke Skywalker
has established a new secret base on the remote ice world of
Hoth.</p>

Résultat

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

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<mark>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<mark>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui Oui4911 Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui4 Oui Oui Oui

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, marie-ototoi, wakka27, tregagnon
Dernière mise à jour par : SphinxKnight,