<mark>
Met en évidence un fragment de texte comme un surligneur, parce qu’il est pertinent dans le contexte actuel.
- Affichage
- inline
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant
Exemple
#<p>Résultats de recherche pour : <strong>boucle</strong></p>
<ul>
<li>Leçon 7 : la <mark>boucle</mark> qui compte jusqu’à dix</li>
<li>Comment interrompre une <mark>boucle</mark> au bon moment ?</li>
</ul>Définition et utilisation
#L’élément <mark> fonctionne comme un surligneur : il met en évidence un fragment pertinent dans une situation donnée. Les exemples typiques sont l’expression recherchée dans des résultats de recherche, un passage d’une citation sur lequel l’auteur veut attirer l’attention, ou une ligne modifiée dans un exemple de code. Par défaut, il a un fond jaune et un texte noir.
La différence avec <strong> est que <strong> marque un contenu important en lui-même, tandis que <mark> marque un contenu important maintenant, par exemple parce que l’utilisateur vient de le rechercher.
Tous les lecteurs d’écran n’annoncent pas la mise en évidence, donc ne transmettez pas de cette façon des informations indispensables à la compréhension du contenu. N’utilisez pas non plus <mark> comme élément décoratif, car vous pouvez régler un fond purement visuel en CSS.
Syntaxe
#<mark>fragment mis en évidence</mark>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<p>Extrait des notes du mentor :</p>
<blockquote>
<p>D’abord, faites fonctionner le code. Ensuite, <mark>rendez-le lisible</mark>. Pensez à la rapidité en dernier.</p>
</blockquote>CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
mark {
background-color: yellow;
color: black;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Ne mettez en évidence que ce qui a un rapport avec le contexte actuel. Une importance permanente, c’est le rôle de
<strong>. - Avec une couleur de fond personnalisée, veillez au contraste avec le texte, surtout en mode sombre.
- La mise en évidence des résultats de recherche est généralement faite par un script qui enveloppe chaque correspondance dans un
<mark>.
Entrées associées
#- <strong>Un texte de grande importance : un avertissement, une information clé.
- <em>Un accent dans la phrase : un mot qui, à la lecture à voix haute, se prononce avec insistance.
- <b>Attire l’attention sur un fragment de texte sans lui donner davantage d’importance, par exemple des mots-clés.
- <span>Un conteneur en ligne générique sans signification, pour styliser un fragment de texte.
- <blockquote>Une citation plus longue provenant d’une autre source, affichée comme un bloc séparé et indenté.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.