Mettre en surbrillance du texte sur une page Web permet d’attirer immédiatement l’attention du lecteur sur des informations importantes. Par exemple, ce texte est surligné en jaune et a probablement attiré votre attention en premier. Il existe plusieurs méthodes pour mettre du texte en surbrillance. Pour procéder, sélectionnez une méthode dans la liste ci-dessous et suivez les instructions.
Mise en évidence à l’aide de la balise HTML5 <mark>
Si vous travaillez sur une page HTML5, la balise <mark> permet de mettre rapidement le texte en évidence. Vous trouverez ci-dessous un exemple de la manière d’utiliser la balise mark et de son résultat. Si votre navigateur prend en charge la balise <mark>, le « texte surligné » devrait avoir un fond jaune.
Exemple de code
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Exemple de résultat
Voici un exemple de texte en surbrillance utilisant la balise <mark>.
Mettre en évidence du texte avec uniquement du code HTML
Pour mettre en évidence du texte avec du code HTML et un support pour tous les navigateurs, définissez le style background-color, comme dans l’exemple ci-dessous, en utilisant la balise <span> HTML.
Exemple de code
<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>
Exemple de résultat
Ce texte est surligné en jaune.
Dans l’exemple ci-dessus, la balise HTML <span> a un code de couleur d’arrière-plan de #FFFF00, c’est-à-dire jaune. Dans ce cas, le mot « jaune » pourrait être utilisé à la place du code de couleur, ou de tout autre nom de couleur d’ailleurs.
Avec le même code, vous pourriez également mettre en évidence un ou plusieurs mots dans un paragraphe pour attirer l’attention sur une section spécifique du texte.
Mise en évidence du texte avec CSS & HTML
Vous pouvez également créer une classe CSS et définir l’attribut « background-color », comme le montre l’exemple ci-dessous.
Exemple de code
<style>body { background-color:blue; }.highlightme { background-color:#FFFF00; }p { background-color:#FFFFFF; }</style>
Dans le code CSS ci-dessus, trois éléments sont définis. Premièrement, la couleur de fond du corps est définie sur le bleu, deuxièmement, une nouvelle classe appelée « highlightme » avec un fond jaune, et enfin, la balise de paragraphe a un fond blanc.
Si vous voulez utiliser la classe « highlightme » pour mettre en évidence votre texte, vous pouvez créer une balise <span> dans votre HTML qui fait référence à la classe CSS.
Exemple de code
<span class="highlightme">test</span>
Comment mettre en évidence un paragraphe complet
La classe CSS ou classe de style mentionnée ci-dessus pourrait également être appliquée à une balise de paragraphe si vous vouliez mettre en évidence un paragraphe complet comme indiqué ci-dessous.
Exemple de code
<p style="background-color: #FFFF00">This whole paragraph of text is highlighted in yellow.</p>
Exemple de résultat
Ce paragraphe entier de texte est mis en évidence en jaune.
Informations supplémentaires
- Voir notre définition CSS, surlignage et HTML pour des pages liées à des informations supplémentaires.
- Aide et support pour les couleurs CSS et HTML.
.