When typing text using a word processor, you will often need to underline certain bits of text. Sometimes, you might need to do this on a website you’re working on; there are two ways to underline in HTML.
Underline in HTML Using <u> Tag
The most straightforward way to underline text in HTML is with the <u> tag. The semantic use of the <u> tag is to underline a portion of text that is unarticulated and styled differently from the rest; for instance, proper names in Chinese text or misspelt words.
The <u> tag is not a self-closing tag and should be used to enclose the portion of text that you want to underline. You can use the tag on all text elements– headings or paragraphs.
How to use the <u> tag:
<h1><u>An Underlined Title</u></h1>
<p>I can choose to underline <u>this word</u></p>Underline in HTML Using CSS
Alternatively, you can choose to underline your HTML element using the CSS text-decoration property and setting the value to underline. With this property, you can choose to underline an entire element of text or use a <span> tag to underline a small portion of the text; below is an example:
<html>
<head>
<style>
.underline {
text-decoration-line: underline;
}
</style>
</head>
<body>
<p class=”underline”>Underline the whole paragraph</p>
<p>Underline a <span class="underline">small portion</span> of text.</p>
</body>
</html>Also, using CSS, you can further modify the underline style by changing the color and style of the text decoration. The text-decoration-style values are:
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;The text-decoration-color value can be any of the recognized CSS color names, RGB or Hex Code values.
The shorthand way of representing all these values together is as follows:
.underline {
text-decoration: underline double blue;
}You can also create a combo of underlined text with other styles; for instance, an underline and bold combo is like this:
.underline {
text-decoration: underline double blue;
font-weight: bold;
}Read More: What is HTML Select?