Path // www.yourhtmlsource.com → Reference → <u>

<u>

by Ross Shannon

The <u> element has been repurposed in HTML5. Originally used simply to underline text, it now represents an unarticulated, though explicitly rendered, non-textual annotation. This includes marking misspelled words, labeling proper names in Chinese text, or other annotations where the underline has specific meaning.

Clock This page was last updated on 2025-11-17


HTML5 Semantic Meaning

The <u> element is valid in HTML5 but with specific semantic meaning. It represents text with a non-textual annotation that is traditionally rendered as an underline:

  • Marking misspelled words (like spell-checker highlights)
  • Proper names in Chinese text (where underlines indicate proper nouns)
  • Other cases where underline conveys specific annotation meaning

Important: Do not use <u> simply to underline text. Underlined text on the web typically indicates hyperlinks, so using <u> for decoration can confuse users. Use CSS text-decoration: underline if you must underline for purely visual purposes.

Syntax

<u>annotated text</u>

The element is inline and requires both opening and closing tags.

Proper Usage

Marking Misspelled Words

<p>The document contains several <u class="spelling-error">mispelled</u> words.</p>

Proper Names in Chinese Text

<p>In this text, <u>proper names</u> are marked with underlines.</p>

With Custom Styling

<!-- HTML -->
<p>The word <u class="spelling-error">recieve</u> is misspelled.</p>

<!-- CSS -->
.spelling-error {
  text-decoration: red wavy underline;
}

Examples

Incorrect Usage (Purely Decorative)

<!-- Don't do this -->
<p>Click <u>here</u> for more information.</p>

This is confusing because underlined text looks like a link but isn't clickable.

Correct Alternative for Links

<!-- Use an actual link -->
<p>Click <a href="info.html">here</a> for more information.</p>

Incorrect Usage (Emphasis)

<!-- Don't do this -->
<p>This is <u>very important</u>.</p>

Correct Alternative for Emphasis

<!-- Use semantic elements -->
<p>This is <strong>very important</strong>.</p>
<p>This is <em>emphasized</em>.</p>

When to Avoid

Avoid using <u> when:

  • You want to emphasize text (use <em> or <strong> instead)
  • You're marking a book title or similar reference (use <cite> instead)
  • You want decorative underlining (use CSS instead)
  • The underline could be confused with a hyperlink
  • There's no specific annotation meaning to the underline

Remember: Underlines on the web typically mean "clickable link." Using <u> inappropriately creates confusion and accessibility issues.

  • <em> - For emphasized text (use this instead of <u> for emphasis)
  • <strong> - For important text
  • <mark> - For highlighted/marked text
  • <ins> - For inserted text in document editing
  • <cite> - For titles of works