<u>: the "wavy underline" element

The HTML <u> element represents a range of inline text that should be displayed to indicate that it has a non-textual annotation. This is rendered by default as a simple solid underline, but can be changed using CSS.

Warning: This element was called the "Underline" element in earlier versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS text-decoration property set to underline.

Usage notes

Along with other pure style elements, the original HTML Underline (<u>) element was deprecated in HTML 4; however, <u> has been reinstated in HTML 5 with a new semantic meaning: marking text with some form of non-textual annotation applied.

Note: Avoid using the <u> element with its default style (of underlined text) so that it can be confused with a hyperlink, which is also underlined by default.

Use cases

Valid use cases for the <u> element include annotating misspellings, applying a proper noun sign to denote proper nouns in Chinese text, and other forms of annotation.

You should not use <u> to underline text for presentation purposes or to denote book titles.

Other elements to consider

In most cases, you should use an element other than <u>, such as:

  • <em>to denote stress emphasis
  • <b> to draw attention to the text
  • <mark> to mark key words or phrases
  • <strong> to indicate that the text has strong importance
  • <cite> to mark the titles of books or other publications
  • <i> to denote technical terms, transliterations, thoughts, or vessel names in Western texts

To provide textual annotations (as opposed to non-textual annotations created with <u>), use the <ruby> element.

To apply an underline appearance without any semantic meaning, use the text-decoration property's underline value.

Examples

Please indicate a spelling error

This example uses the <u> element and some CSS to display a paragraph that includes a spelling error, with the error indicated in the red wavy underline style that is quite commonly used for this purpose.

HTML

<p>In questa frase c'è una parola scritta 
<u class="spelling">sbaghliata</u></p>

In HTML, we see the use of <u>with a class, spelling, which is used to indicate the misspelling of the "wrong" word.

CSS

u.spelling {
  text-decoration: red wavy underline;
}

This CSS indicates that when the element is styled with the spelling class, it should have a red wavy underline under its text. This is a common style for spelling errors. Another common style can be presented using red dashed underline.