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

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>
mark datepicker
Capture d'écran © Alsacreations/ Creative Commons


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