Astuce : L'élément pour attirer l'attention

Sortez votre feutre jaune

Nouveau venu en HTML5, l'élément <mark> est un surligneur de texte. Il marque un passage spécifique, que l'on souhaite mettre en valeur d'une façon particulière, pour attirer l'attention.

Son style par défaut est celui d'un texte surligné en jaune (dans les navigateurs qui le reconnaissent).

mark {
  background-color: yellow;
  color: black;
}

Pour les anciens navigateurs qui ne comprendraient pas ce style par défaut, il suffit de l'ajouter à votre feuille CSS, voire de le personnaliser en choisissant d'autres couleurs.

Usages

Que peut-on imaginer comme usages pratiques à cette balise ? Voici quelques suggestions et une page de démonstration.

Démonstrations

Marquer les mots trouvés dans des résultats de recherche

Par exemple sur la page de résultats, les passages surlignés seront ceux qui correspondent exactement aux termes recherchés. Dans ce cadre, la balise agit comme un marqueur relatif à l'activité de l'utilisateur : c'est lui qui provoque l'application de <mark> à certains passages de texte en fonction de ses actions (ce qu'il a recherché).

<p>5 résultats pour le mot "HTML"</p>
<ul>
  <li>...<mark>HTML</mark> est le langage du web...<a href="#">Lire</a></li>
  <li>Avec CSS, <mark>HTML</mark> est surpuissant. <a href="#">Lire</a></li>
  <li>Les balises <mark>HTML</mark> sont délicieuses. <a href="#">Lire</a></li>
</ul>

Marquer une portion de texte

Il peut s'agir d'un texte modifié ou ajouté par l'éditeur d'un document, voire d'un passage que l'on souhaiterait souligner dans une citation alors qu'il ne l'était pas dans sa version originale.

<p>Il y a quelques années, nous écrivions ceci :</p>
<blockquote>
  <p>A long terme, <mark>XHTML 2 remplacera HTML</mark>, et qu'il sera nécessaire pour les navigateurs et les intégrateurs de s'adapter à ce nouveau langage de balisage.</p>
</blockquote>
<p>En réalité, nous avons vu que HTML5 a remplacé XHTML 2.</p>

Marquer une portion de code source

Un passage spécifique peut être surligné pour s'y référer ultérieurement.

<pre><code><mark>var</mark> i = 3;</code></pre>
<p>Le mot-clé var permet de déclarer une variable en JavaScript.</p>

Marquer le jour actif d'un calendrier

Dans une application devant afficher un agenda ou un module de calendrier, marquer le jour courant avec <mark> peut être approprié.

Pour les lecteurs d'écran, le texte balisé par <mark> est lu d'une façon constante, au contraite de <strong> et <em> qui marquent un changement d'importance ou ajoutent une emphase.

Prise en charge

Navigateurs	Versions
	Internet Explorer 9+
	Firefox 6+
	Chrome 10+
	Safari 5+ iOS Safari Mobile 5+
	Opera 11+
	Android Browser 3+

Propriétés de l'élément <mark>