HTML provides different styling options for the text. Underlining the HTML text is one of them. Simply underlining will draw a straight line under the text without occupying the line below. In this tutorial, we will learn the how-to underline the HTML text with <u> tag, CSS code, CSS class, and set the underlining properties and alternatives.
Underline Text with <u> Tag
HTML provides the <u> tag in order to underline the given text in HTML. <u> is the start tag for underlining and </u> is used to set the end of the underline. Underline tags can be used for different text types like hyperlinks, bold text, etc without a problem. In the following example, we will underline a single word or complete sentence or a hyperlink. The <u> or underline HTML tag is supported by all major browsers like Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, or Opera.
<html>
<body>
<h1>HTML Text Underline Example</h1>
<p>I like <u>poftut.com</u></p>
<p><u>I like poftut.com</u></p>
<p>I like <u><a href="https://www.poftut.com">poftut.com</a></u></p>
<p><u><a href="https://www.poftut.com">I like poftut.com</a></u></p>
</body>
</html>
Underline Text with CSS text-decoration Attribute
CSS provides the text-decoration attribute in order to underline different HTML elements. We can use the text-decoration attribute in order to underline HTML text. The text-decoration style attribute can be used with different HTML tags or elements. In the following example we have used the <span> tag to select the text and underline it.
<html>
<body>
<h1>HTML Text Underline Example</h1>
<p>I like <span style="text-decoration:underline">poftut.com</span></p>
<p><span style="text-decoration:underline">I like poftut.com</span></p>
<p>I like <span style="text-decoration:underline"><a href="https://www.poftut.com">poftut.com</a></span></p>
<p><span style="text-decoration:underline"><a href="https://www.poftut.com">I like poftut.com</a></span></p>
</body>
</html>
Set Text Underline Color and Style
In some cases just underlining the HTML text may not enough. We can also color or change the style of the underline. CSS attribute text-decoration can be used to style and color the underlines with the <u> tag or without it. Below we will provide the HTML text underline color as red, green and the style as wavy, dashed, dotted, and double.
wavy style will create the not a straight line where the line will be wavy like waves.
dashed style will create dashed underline.
dotted style is similar to the dashed but the points will be smaller.
double style will put two underlines where default is single underline.
The red color and dashed underline can be used for expressing spelling, syntax or general errors. Also dotted
<html>
<body>
<h1>HTML Text Underline Example</h1>
<p>I like <u style="text-decoration: red underline">poftut.com</u></p>
<p><u style="text-decoration: red wavy underline">I like poftut.com as wavy</u></p>
<p><u style="text-decoration: green wavy underline">I like poftut.com as wavy</u></p>
<p>I like <u style="text-decoration: red dashed underline">poftut.com as dashed</u></p>
<p><u style="text-decoration: red dotted underline">I like poftut.com as wavy</u></p>
<p><u style="text-decoration: red double underline">I like poftut.com as wavy</u></p>
</body>
</html>
Use CSS Class For HTML Text Underline
Writing every underline CSS code, again and again, is not good work. A CSS class can be created for different underline use cases and this class can be used for HTML text underline with other HTML tags. In the following example we will create different CSS classes like underline-red, underline-green to create text underline easily.
<html>
<head>
<style>
.underline-red { text-decoration: red underline;}
.underline-green { text-decoration: green underline;}
</style>
</head>
<body>
<h1>HTML Text Underline Example</h1>
<p class="underline-red">I like poftut.com</p>
<p class="underline-green">I like poftut.com</p>
</body>
</html>