- The Unarticulated Annotation Element

The `` Element

Inline HTML 3.2

The unarticulated annotation element represents text with an unarticulated, non-textual annotation, such as labeling text as a misspelling or indicating proper names in Chinese text.

Quick Example

<p>Check your <u class="spelling">recieve</u> spelling.</p>
<p>In Chinese: <u class="proper-name">王力</u> (Wang Li)</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Check your <u class="spelling">recieve</u> spelling.</p>
<p>In Chinese: <u class="proper-name">王力</u> (Wang Li)</p>

Syntax

<u>annotated text</u>

The  element is rendered with an underline by default, but its purpose is to indicate unarticulated annotations, not to add visual underlining.

Modern Use Cases

Spelling Errors

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

<p>
This sentance has a
<u class="spelling-error" title="Incorrect spelling">misteak</u>.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

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

<p>
This sentance has a
<u class="spelling-error" title="Incorrect spelling">misteak</u>.
</p>

Grammar Mistakes

<style>
u.grammar-error {
  text-decoration: underline wavy blue;
}
</style>

<p>
<u class="grammar-error" title="Subject-verb agreement">They was</u>
going to the store.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
u.grammar-error {
  text-decoration: underline wavy blue;
}
</style>

<p>
<u class="grammar-error" title="Subject-verb agreement">They was</u>
going to the store.
</p>

Proper Names in Chinese Text

<p lang="zh">
<u class="proper-name">李明</u>是一位工程师。
</p>
<p>(Li Ming is an engineer.)</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p lang="zh">
<u class="proper-name">李明</u>是一位工程师。
</p>
<p>(Li Ming is an engineer.)</p>

Labeling Text

<style>
u.label {
  text-decoration: underline dotted #999;
}
</style>

<p>
The word <u class="label" title="Needs review">ambiguous</u>
may need clarification.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
u.label {
  text-decoration: underline dotted #999;
}
</style>

<p>
The word <u class="label" title="Needs review">ambiguous</u>
may need clarification.
</p>

When NOT to Use ``

<!-- Don't use <u> just for styling -->
<p><u>Important information</u></p>

<p class="underlined">Important information</p>
<style>
  .underlined { text-decoration: underline; }
</style>

Don’t Use for Links

Wrong
Right

<!-- Never use <u> to style links -->
<u onclick="...">Click here</u>

<a href="...">Click here</a>

Don’t Use for Emphasis

Wrong
Right

<p>This is <u>very important</u>.</p>

<p>This is <strong>very important</strong>.</p>

Proper Use Cases

<!-- Indicating misspelled words -->
<p>Check <u class="spelling">recieve</u> vs receive</p>

<!-- Proper names in Chinese text -->
<p lang="zh">我是<u>张伟</u>。</p>

<!-- Text needing review -->
<p><u class="review" title="Fact check needed">Citation</u></p>

Real-World Examples

Text Editor Spell Check

<style>
u.spell-error {
  text-decoration: underline wavy red;
  cursor: pointer;
}
u.grammar-error {
  text-decoration: underline wavy blue;
  cursor: pointer;
}
</style>

<div class="editor">
<p>
  This is a
  <u class="spell-error" title="Did you mean: sentence?">sentance</u>
  with
  <u class="grammar-error" title="Subject-verb disagreement">multiple errors</u>.
</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
u.spell-error {
  text-decoration: underline wavy red;
  cursor: pointer;
}
u.grammar-error {
  text-decoration: underline wavy blue;
  cursor: pointer;
}
</style>

<div class="editor">
<p>
  This is a
  <u class="spell-error" title="Did you mean: sentence?">sentance</u>
  with
  <u class="grammar-error" title="Subject-verb disagreement">multiple errors</u>.
</p>
</div>

Document Review

<style>
u.needs-review {
  text-decoration: underline dotted orange;
}
u.factcheck {
  text-decoration: underline dotted purple;
}
</style>

<article>
<p>
  The company was founded in
  <u class="factcheck" title="Verify date">1995</u>
  and has
  <u class="needs-review" title="Check current number">500 employees</u>.
</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
u.needs-review {
  text-decoration: underline dotted orange;
}
u.factcheck {
  text-decoration: underline dotted purple;
}
</style>

<article>
<p>
  The company was founded in
  <u class="factcheck" title="Verify date">1995</u>
  and has
  <u class="needs-review" title="Check current number">500 employees</u>.
</p>
</article>

Language Learning

<style>
u.mistake {
  text-decoration: underline wavy red;
}
</style>

<div class="exercise">
<p><strong>Correct the errors:</strong></p>
<p>
  I <u class="mistake">goed</u> to the store yesterday.
  She <u class="mistake">don't</u> like coffee.
</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
u.mistake {
  text-decoration: underline wavy red;
}
</style>

<div class="exercise">
<p><strong>Correct the errors:</strong></p>
<p>
  I <u class="mistake">goed</u> to the store yesterday.
  She <u class="mistake">don't</u> like coffee.
</p>
</div>

Annotation Styles

<style>
u.misspelling {
  text-decoration: underline wavy red;
}
u.grammar {
  text-decoration: underline wavy blue;
}
u.style {
  text-decoration: underline wavy green;
}
u:hover::after {
  content: attr(title);
  position: absolute;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  margin-left: 8px;
}
</style>

<p>
<u class="misspelling" title="Spelling: receive">recieve</u>
<u class="grammar" title="Grammar: were">was</u>
<u class="style" title="Style: wordy">in order to</u>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
u.misspelling {
  text-decoration: underline wavy red;
}
u.grammar {
  text-decoration: underline wavy blue;
}
u.style {
  text-decoration: underline wavy green;
}
u:hover::after {
  content: attr(title);
  position: absolute;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  margin-left: 8px;
}
</style>

<p>
<u class="misspelling" title="Spelling: receive">recieve</u>
<u class="grammar" title="Grammar: were">was</u>
<u class="style" title="Style: wordy">in order to</u>
</p>

Styling

Customize underline appearance:

<style>
u {
  text-decoration: underline;
  text-decoration-color: #999;
  text-decoration-style: dotted;
}
u.error {
  text-decoration-color: red;
  text-decoration-style: wavy;
}
</style>

<p>Normal <u>annotation</u> and <u class="error">error</u>.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
u {
  text-decoration: underline;
  text-decoration-color: #999;
  text-decoration-style: dotted;
}
u.error {
  text-decoration-color: red;
  text-decoration-style: wavy;
}
</style>

<p>Normal <u>annotation</u> and <u class="error">error</u>.</p>

Accessibility

Screen readers typically don’t announce  differently. The visual annotation is not conveyed to screen reader users.

Provide Text Alternatives

Use title or ARIA attributes to convey meaning:

<u class="spelling" title="Possible spelling error">recieve</u>

<u aria-label="Spelling error: receive">recieve</u>

Don’t Rely on Visual Alone

Ensure the meaning is clear from context:

Poor
Better

<p>Check <u>this</u>.</p>

<p>Check the spelling of <u class="spelling-error">this</u>.</p>

CSS Text Decoration

Modern CSS provides better control than :

<style>
.underline-solid { text-decoration: underline solid; }
.underline-double { text-decoration: underline double; }
.underline-dotted { text-decoration: underline dotted; }
.underline-dashed { text-decoration: underline dashed; }
.underline-wavy { text-decoration: underline wavy red; }
</style>

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

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.underline-solid { text-decoration: underline solid; }
.underline-double { text-decoration: underline double; }
.underline-dotted { text-decoration: underline dotted; }
.underline-dashed { text-decoration: underline dashed; }
.underline-wavy { text-decoration: underline wavy red; }
</style>

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

Historical Context

The  element was originally deprecated in HTML 4 because it was purely presentational. HTML5 redefined it with semantic meaning for unarticulated annotations.

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The  element has been supported since the earliest browsers, though its semantic meaning was refined in HTML5.

For highlighted or marked text. Learn more →

For inserted text in document edits. Learn more →

For deleted text in document edits. Learn more →

<u> - The Unarticulated Annotation Element

The `<u>` Element

Quick Example

Syntax

Modern Use Cases

Spelling Errors

Grammar Mistakes

Proper Names in Chinese Text

Labeling Text

When NOT to Use `<u>`

Don’t Use for Regular Underlines

Don’t Use for Links

Don’t Use for Emphasis

Proper Use Cases

Real-World Examples

Text Editor Spell Check

Document Review

Language Learning

Annotation Styles

Styling

Accessibility

Provide Text Alternatives

Don’t Rely on Visual Alone

CSS Text Decoration

Historical Context

Browser Support

Specifications

<u> - The Unarticulated Annotation Element

The <u> Element

Quick Example

Syntax

Modern Use Cases

Spelling Errors

Grammar Mistakes

Proper Names in Chinese Text

Labeling Text

When NOT to Use <u>

Don’t Use for Regular Underlines

Don’t Use for Links

Don’t Use for Emphasis

Proper Use Cases

Real-World Examples

Text Editor Spell Check

Document Review

Language Learning

Annotation Styles

Styling

Accessibility

Screen Reader Behavior

Provide Text Alternatives

Don’t Rely on Visual Alone

CSS Text Decoration

Historical Context

Browser Support

Related Elements

Specifications

The `<u>` Element

When NOT to Use `<u>`