How to Underline Text in HTML?

Here are two methods to underline text in HTML.

1. Underlining text using <u> Tag

The <u> tag is used to underline text content. It wraps the content to be underlined with a horizontal line beneath it. This tag is commonly used for hyperlinks or emphasized text.

Syntax

<u> Underlined Text </u>

<p><u>This is the Underlining example</u></p>

Output

This is the Underlining example

2. Using CSS text-decoration Property

We can use CSS text-decoration property inline, internal or external which will allow for the decoration of text, including underlining. By setting text decoration to “underline”, text within HTML elements can be visually emphasized with a line beneath it, providing a clear indication of emphasis or link styling.

Syntax

text-decoration: underline:

<p style="text-decoration: underline;">This is the Underlining example</p>

Output

This is the Underlining example

Both methods underline text, but the decision to use one over the other depends on your needs

• Use <u> when you need quick underlining in simple projects where semantic meaning is less important.
• Use CSS text-decoration for more control, better separation of concerns, and cleaner code.