HTML5 : l'élément pour attirer l'attention

Nouveau venu en HTML5, la balise a pour but de marquer un passage spécifique, que l'on souhaite mettre en valeur. Son style par défaut est celui d'un texte surligné en jaune.

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.


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é, si l'on doit faire référence ultérieurement à cette date dans la page.

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

Prise en charge
 

Prise en charge par les navigateurs

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

Propriétés de l'élément

Propriété	Détails
Source : Alsacreations
Modèles de contenu autorisés	Contenu de phrasé
Parents autorisés	Tout élément pouvant contenir des éléments de phrasé
Omission de balise	Les balises ouvrantes et fermantes sont obligatoires
Style par défaut	mark { background-color:yellow; color:black; }

Article réalisé par dew (Alsacreations) sous licence Creative Commons