How to Underline Text in HTML (CSS Method)

In HTML, text can be easily underlined by enclosed the text with the <u> and </u> tags. However, in HTML 4.0, the <u> and </u> tags element has been depreciated. Although most web browsers will continue to support the u element to underline text, the usage of the u element makes the web pages less “pretty” in the sense of web standards compliant.

In the world of “beautiful” web, the proper way to underline words or sentences is by using CSS (Cascading Style Sheet) markups. The underline style declaration can be defined via external CSS file as class or on-the-go via style attributes, both for SPAN tags.

How to Underline in HTML using CSS

Enclosed the text which to have underlined in within <span> and </span> tags, with the opening span element has style attribute which defines text-decoration as underline.

For example:

<span style=”text-decoration:underline;”>This line of text is underlined.</span>

Will have the following underline result:

This line of text is underlined.

If you’re using underline attribute frequently, you can place a class in main CSS file. The CSS class that can be used is:


.underline {
text-decoration: underline;
}


Then, call the underline class (can be of different name you wish) with the same span element. For example:

<span class=”underline”>This line of text is underlined.</span>

The alternative to use the class for span element allows easier usage of underline attribute, and easier upkeep just in case you want to change how the underlined text should appear in future.

Tip: If you need underline a whole paragraph, the same style attribute or class can be used for p (<p> and </p>) and div (<div> and </div>) elements.

Anyway webmaster is encouraged to use alternative decorative elements for text such as em (emphasis), i (italic), b (boldface) or strong (strongly emphasized). The reason why underline is not recommended because underlined text resembles a link, where most hyperlink on web pages are underlined to indicate that it’s a click-able links. Thus, a underlined text can confuse the visitors and make it harder to distinguish text from links.