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:
| Browser | Compatibility |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Internet Explorer | Yes |