Defines text with unarticulated annotation (underlined)

Definition and Usage

The  tag represents text with an unarticulated, though explicitly rendered, non-textual annotation.

In HTML5, the  element was redefined to represent text that should be stylistically different from normal text, such as:

Misspelled words
Proper names in Chinese text
Other forms of non-textual annotation

Tip: By default, text within the  tag is rendered with an underline. However, this can be changed with CSS.

Important: Avoid using the  element where it could be confused with a hyperlink. Underlined text is typically associated with links, so use it sparingly and style it differently from links when necessary.

Note: For emphasis, use  or . For marking text, use . For inserted text, use <ins>.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The  tag supports the Global Attributes in HTML.

The  tag also supports the Event Attributes in HTML.

Examples

Basic Underline

Create basic underlined text:

Example
<p>This is <u>underlined text</u> in a paragraph.</p>

Proper Names (Chinese Text)

Marking proper names in Chinese text (a common use case in HTML5):

Example
<p>The conference was held in <u>北京</u> (Beijing).</p>

Misspelled Words

Indicating misspelled words:

Example
<p>This word is <u class="spelling-error">mispeled</u>.</p>

<style>
  .spelling-error {
    text-decoration: underline wavy red;
  }
</style>

Underlined Text with Custom Styling

Style the underline differently from the default:

Example
<style>
  .custom-underline {
    text-decoration: underline;
    text-decoration-color: #745af2;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
</style>

<p>This is <u class="custom-underline">custom underlined</u> text.</p>

Semantic Alternatives to Underline

Use more semantic tags when appropriate:

Example
<!-- For emphasis, use <em> or <strong> -->
<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>important</strong> text.</p>

<!-- For highlighting, use <mark> -->
<p>This is <mark>highlighted</mark> text.</p>

<!-- For inserted text, use <ins> -->
<p>This is <ins>inserted</ins> text.</p>

Avoiding Link Confusion

Style underlined text to avoid confusion with links:

Example
<style>
  /* Links are blue and underlined */
  a {
    color: #0066cc;
    text-decoration: underline;
  }

  /* Underlined text uses a different color and style */
  u {
    text-decoration: underline dotted;
    text-decoration-color: #666;
    color: inherit;
  }
</style>

<p>This is a <a href="#">link</a> and this is <u>underlined text</u>.</p>

Multiple Underline Styles

Different underline styles using CSS:

Example
<style>
  .underline-solid {
    text-decoration: underline solid;
  }

  .underline-dotted {
    text-decoration: underline dotted;
  }

  .underline-dashed {
    text-decoration: underline dashed;
  }

  .underline-wavy {
    text-decoration: underline wavy;
  }

  .underline-double {
    text-decoration: underline double;
  }
</style>

<p><u class="underline-solid">Solid underline</u></p>
<p><u class="underline-dotted">Dotted underline</u></p>
<p><u class="underline-dashed">Dashed underline</u></p>
<p><u class="underline-wavy">Wavy underline</u></p>
<p><u class="underline-double">Double underline</u></p>

HTML5 Redefinition

In HTML 4, the  tag was used purely for underlining text and was considered presentational. In HTML5, it was redefined with semantic meaning:

HTML 4: Simple text decoration (underline)
HTML5: Text with unarticulated, non-textual annotation

Key Point: The  tag now has semantic meaning in HTML5, representing text that requires some form of non-textual annotation, not just visual underline.

vs <a> - Underline vs Link

One of the most important considerations when using the  tag is avoiding confusion with hyperlinks:

Tag	Purpose	Visual Appearance
`<a>`	Hyperlink to another page or resource	Typically blue and underlined; clickable; changes cursor to pointer
`<u>`	Non-textual annotation (not a link)	Underlined but should be styled differently from links to avoid confusion

Best Practice: Always style  elements differently from <a> elements to prevent user confusion. Users expect underlined text to be clickable links.

When to Use

The  tag should be used in specific scenarios:

Use Case	When to Use <u>	Example
Chinese proper names	To mark proper names in Chinese text	<u>李明</u>
Spelling errors	To indicate misspelled words	<u class="spelling">teh</u>
Non-textual annotation	When text needs visual distinction without semantic meaning	<u>annotated</u>

Try it Yourself

Interactive Example

See how underlined text appears:

This is basic underlined text using the tag.

This is a for comparison.

This is misspelled text with a wavy red underline.

Try in Code Playground

Best Practices

Avoid for emphasis: Use  or  for emphasis instead of 
Use sparingly: Overusing underlines can confuse users who expect underlined text to be links
Style differently from links: Always distinguish  visually from <a> elements
Consider semantic alternatives: Use  for highlighting, <ins> for insertions
Add appropriate classes: Use classes to indicate the purpose (e.g., "spelling-error", "proper-name")
Use for non-textual annotations: Follow HTML5 semantics by using it for unarticulated annotations
Provide context: When using , ensure the context is clear to users
Test accessibility: Ensure screen readers handle underlined text appropriately

Alternatives to

Consider these semantic alternatives before using :

Alternative	Purpose	When to Use
`<em>`	Emphasis (usually italic)	When you want to emphasize text
`<strong>`	Strong importance (usually bold)	When text is of strong importance
`<mark>`	Highlighted/marked text	When you want to highlight or mark text for reference
`<ins>`	Inserted text	When showing text that has been added to a document
`<span>`	Generic inline container	When you need custom styling without semantic meaning

Default CSS Settings

Most browsers will display the  element with the following default values:

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

u {
  text-decoration: underline;
}

Related Tags

<a>
Defines a hyperlink
Defines emphasized text
Defines important text
Defines marked/highlighted text
<ins>
Defines inserted text
Defines inline container

Sample contact and navigation controls above are demonstrations. They do not contact anyone or open a destination.

Analytics choices

<u>

Definition and Usage

Browser support and standards

Attributes

Examples

Basic Underline

Example

Proper Names (Chinese Text)

Example

Misspelled Words

Example

Underlined Text with Custom Styling

Example

Semantic Alternatives to Underline

Example

Avoiding Link Confusion

Example

Multiple Underline Styles

Example

HTML5 Redefinition

<u> vs <a> - Underline vs Link

When to Use <u>

Try it Yourself

Interactive Example

Best Practices

Alternatives to <u>

Default CSS Settings

Default CSS

Related Tags