Learn all about the <u> tag in HTML

The <u> tag historically applied a purely visual underline (underline 🇺🇸).

Since HTML 5, it has semantic value: it is used to mark non-standard text (for example a proper name in a foreign language, a spelling error, a scientific name or a term).

To simply underline text for formatting purposes, the best practice is to use CSS with a text-decoration: underline; property. Reserve <u> for cases where the underline carries meaning, such as indicating incorrect spelling. 😉

Structure and syntax of the <u> tag

Basic structure and syntax

<u> is a container tag (therefore works in pairs):

• it has an opening tag: <u>
• as well as a closing tag: </u>

Here is its syntax:

<u>[Underlined text with semantic value]</u>

Usage example

<p>The word <u>believeme</u> is spelled incorrectly; we expect <em>believemy</em>.</p>

The misspelled word is underlined to draw attention without confusing decorative underline and semantic underline.

Attributes

<u> accepts the standard HTML attributes (class, id, style, title, etc.). It does not have specific attributes.

Difference with other similar tags

• <em>: adds semantic emphasis, italic by default.
• <i>: also italicizes but without any particular meaning (a bit like <b> compared to a <strong> tag).
• <strong>: indicates increased importance, rendered in bold.

Best practices

Use <u> to signal something: spelling errors, proofreading annotations, etc.

For simple decorative underline, rather apply a CSS class with text-decoration: underline as we saw together.

Above all, don't combine a semantic <u> with a link: this creates redundancy and is totally useless.

The <u> tag is not recognized by screen readers as emphasis; don't use it to replace <em> or <strong>.

Browser compatibility

<u> is supported by all modern browsers: