HTML fournit différentes options de style pour le texte. Souligner le texte HTML en fait partie. Le simple fait de souligner dessinera une ligne droite sous le texte sans occuper la ligne ci-dessous. Dans ce didacticiel, nous allons apprendre comment souligner le texte HTML avec la balise < u >, le code CSS, la classe CSS et définir les propriétés de soulignement et les alternatives.

Souligner le texte avec < u > Tag

HTML fournit la balise < u > afin de souligner le texte donné en HTML. < u > est la balise de début pour le soulignement et < / u > est utilisé pour définir la fin du soulignement. Les balises de soulignement peuvent être utilisées pour différents types de texte comme les hyperliens, le texte en gras, etc. sans problème. Dans l’exemple suivant, nous soulignerons un seul mot ou une phrase complète ou un hyperlien. La balise < u > ou soulignée HTML est prise en charge par tous les principaux navigateurs comme Google Chrome, Mozilla Firefox, Microsoft Edge, Safari ou Opera .

Souligner le texte avec l’attribut CSS text-decoration

CSS fournit l’attribut text-decoration afin de souligner différents éléments HTML. Nous pouvons utiliser l’attribut text-decoration pour souligner du texte HTML. L’attribut de style de décoration de texte peut être utilisé avec différentes balises ou éléments HTML. Dans l’exemple suivant, nous avons utilisé la balise < span > pour sélectionner le texte et le souligner.

Définir la couleur et le style de soulignement du texte

Dans certains cas, le simple fait de souligner le texte HTML peut ne pas suffire. Nous pouvons également colorer ou changer le style du soulignement. L’attribut CSS text-decoration peut être utilisé pour styliser et colorer les soulignements avec < u > étiquette ou sans elle. Ci-dessous, nous fournirons la couleur de soulignement du texte HTML en rouge, vert et le style en ondulé, pointillé, pointillé et double.

wavy créera une ligne non droite où la ligne sera ondulée comme des vagues.

créera un soulignement en pointillé.

dotted Le style est similaire au pointillé mais les points seront plus petits.

Le style double mettra deux soulignements où la valeur par défaut est un soulignement simple.

La couleur rouge et le soulignement en pointillés peut être utilisé pour exprimer l’orthographe, la syntaxe ou des erreurs générales. dotted

Utiliser la classe CSS pour le soulignement de texte HTML

Ecrire chaque code CSS souligné, encore et encore, n’est pas un bon travail. Une classe CSS peut être créée pour différents cas d’utilisation de soulignement et cette classe peut être utilisée pour le soulignement de texte HTML avec d’autres balises HTML. Dans l’exemple suivant, nous allons créer différentes classes CSS comme underline-red, underline-green pour créer facilement du texte souligné.