How to Underline Text in HTML?

Underlining a text is one of the most basic operations when writing a sentence, paragraph, or heading. We can use it to represent or highlight a critical or incorrect word.

In HTML, there are mainly two methods of doing it.

• Using the <u> tag.
• Using the text-decoration CSS property.

Let us explore each of these methods with the help of an example.

Text Decoration Using The <u> Tag

The <u> tag stands for Unarticulated Annotation element. It was used in the earlier version of HTML to underline text.

Syntax:

Example:

Code:

Output:

I am happy to read this article.

Explaination

<u> was removed in HTML 4.01 and then reloaded again in HTML5 to highlight text that should be different from the normal text in terms of style. It is a semantic element and should be used only for specific purposes like underlining a spelling mistake or writing proper Chinese names but not for styling purposes.

It supports Global Attributes and Event Attributes in HTML.

Whenever using the <u> tag, ensure that you do not confuse the reader between hyperlinks and underlined texts. We should use <cite> tag in place of <u> tag when we want to highlight a book or paper title.

Text Decoration Using text-Decoration CSS Property

Another way to underline a text is to use the "text-decoration" property in CSS.

Syntax:

Example:

Code:

Output:

Text underlined using "text-decoration" property.

It is recommended to use the text-decoration CSS property to underline text as it provides custom styling options and works on all browsers.

Example:

Code:

Output:

Text underlined using custom "text-decoration" property.

Learn More

• To learn more about the HTML tags and how to use the HTML tags while creating the web pages refer HTML Tag - Scaler Topics.
• To know what are the available tags in the HTML you can refer to Lists of HTML tags - Scaler Topics