<u> Unarticulated annotation
Text with an unspoken annotation, such as a flagged spelling error.
<u> marks text that carries an unspoken annotation: a misspelled word, say, or a proper name in Chinese text. Browsers underline it.
Use it sparingly. People expect underlined text to be a link, and underlined plain text sends them clicking. Emphasis belongs in <em>, titles in <cite> and highlighting in <mark>.
The u element in the HTML Living Standard (opens in a new tab) calls it an unarticulated annotation, like a marked spelling error. Inserted text gets the ins element.
Syntax
<u>annotated text</u>When to use it
The <u> element has a narrow job: marking text with an annotation that is shown but not spoken. Real uses include flagging misspelled words in a spelling quiz, marking grammar errors in a teacher's feedback, and the proper name mark used in some Chinese texts.
Most of the time another element fits better. Added text in an edited document is ins. Highlighted relevance is mark. Stress is em. A title is cite. Anything clickable is a link, styled as you like.
Because readers expect underlined text to be clickable, change the default look of u wherever you use it. A wavy red line, like a spell checker draws, works well for spelling errors: text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:red. Do not use u to underline headings or menu labels for decoration; set text-decoration on those elements in CSS instead, so the meaning of u stays specific.
Live example
Edit the code and watch the preview.
<p>Spelling check: I <u>recieved</u> your letter.</p>More examples
Spelling feedback with a wavy line
A spelling exercise marks each misspelled word. A wavy red underline set with CSS looks like a spell checker and cannot be mistaken for a link, which a plain underline could.
<p>Find the mistakes:</p>
<p>I <u style="text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:red">recieved</u> your letter on <u style="text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:red">wensday</u> and read it twice.</p>Proper name mark in Chinese text
In some Chinese writing, proper names are underlined. The u element fits because the underline is an annotation, not stress. This sentence says that Li Bai is a poet; the lang attribute helps with pronunciation.
<p lang="zh"><u>李白</u>是诗人。</p>
<p>(Translation: Li Bai is a poet.)</p>Tip: Underline links, and almost nothing else.
Browser support
u works in every browser and draws a solid underline by default. It was deprecated in HTML 4 as purely presentational, then brought back in HTML5 with its current meaning of an unarticulated annotation. The text-decoration-style property used for wavy lines works in all current browsers.
Accessibility
Users with cognitive or visual impairments easily mistake underlined text for a link, so style u content in a way nobody can confuse with a hyperlink. How users tell links apart from other text is covered in the W3C note Understanding Use of Color (opens in a new tab).
Common mistakes
Wrong
<u>Important note</u>Right
<strong>Important note</strong>An underline looks like a link and is not emphasis. Use strong or em.
Frequently asked questions
Is the u tag deprecated?
No, but its meaning changed. The HTML Living Standard defines <u> as an unarticulated, non-textual annotation, such as a mark on a misspelled word or a proper name in Chinese text. It is the wrong tool for decorative underlining; CSS text-decoration:underline handles that.
Why is underlining text a bad idea on the web?
Because people have learned that underlined text is a link. Underline ordinary words and they will try to click them. Use <em> or <strong> for emphasis and <cite> for titles of works. Keep underlines for links and for real annotations like spelling errors, styled so they look different from links.