Comment souligner un texte en HTML ?

Il existe plusieurs solutions pour souligner un texte en HTML. La solution la plus récente et la plus recommandée fait appel aux feuilles de style.

Pour souligner un texte en HTML, en utilisant les feuilles de style, utilisez la propriété text-decoration :

<p style="text-decoration: underline;">Ce texte est souligné en HTML</p>

Remarque : Vous pouvez soit utiliser la valeur style="" directement dans vos balises P, SPAN, DIV, etc, ou bien externaliser la propriété text-decoration dans une balise STYLE ou un fichier CSS à part, et l'utiliser par exemple avec l’attribut CLASS.

Exemple d'utilisation pour souligner un texte HTML avec l’attribut CLASS :

<style> 
.souligner { 
text-decoration: underline; 
 } 
</style>

<p class="souligner">Ce texte est souligné en HTML</p>

Vous pouvez également utiliser JavaScript pour souligner un texte HTML :

<p id="souligner">Ce texte est souligné en HTML</p>

<script>
document.getElementById("souligner").style.textDecoration = "underline";
</script>

Rappel : Un id doit être unique, il ne doit pas y avoir plusieurs id identiques sur une même page HTML.

Astuce : underline permet de souligner, overline permet de surligner un texte HTML.

Vous pouvez également utiliser la balise U pour souligner un texte.

<u>Ce texte est souligné en HTML</u>

Remarque : Cette méthode est ancienne, elle date du HTML1. Elle est dépréciée mais fonctionne encore avec l'ensemble des navigateurs.

Vous pouvez également utiliser la propriété CSS text-decoration-style. Son avantage c'est qu'elle permet de personnaliser le style du trait :

• La valeur solid correspond à une ligne pleine et simple.
• La valeur double correspond à une double ligne pleine.
• La valeur dotted correspond à une simple ligne en pointillée.
• La valeur dashed correspond à une simple ligne avec des tirets.
• La valeur wavy correspond à une ligne ondulée.

Remarque : la propriété text-decoration-style doit être associée à la propriété text-decoration avec la valeur underline.

<style>
.exemple {
  text-decoration: underline;
  text-decoration-style: wavy;
}
</style>
<p class="exemple">Exemple de texte souligné avec une ligne ondulée.</p>