u

The u element represents a span of inline text with an unarticulated, though explicitly rendered, non-textual annotation, such as marking text as misspelled or labeling proper names in Chinese text.

Description

The <u> element represents text with an "unarticulated annotation" - a non-textual annotation that is rendered but not explicitly spoken. In modern HTML5, it's repurposed from the old "underline" element to serve specific semantic use cases. It's styled with a wavy red underline by default in Vanilla Breeze to indicate spelling errors.

Semantic Meaning

The u element indicates text with non-textual annotation:

  • Misspelled words: Mark text as potentially incorrectly spelled
  • Proper names in Chinese: Traditional convention for proper nouns
  • Annotation without specific meaning: Visual distinction without semantic emphasis

Note: This is NOT for generic underlining - use CSS for decorative underlines.

When to Use

  • Spelling errors: Indicate misspelled words in educational content
  • Spell-check demonstrations: Show how spell-checking works
  • Chinese proper names: Mark proper nouns per Chinese typography conventions
  • Grammar examples: Highlight errors for teaching purposes

When NOT to Use

  • Emphasis: Use <em> or <strong>
  • Links: Underlines on links can confuse with <u> - avoid using both
  • Decorative underlines: Use CSS text-decoration: underline
  • Book titles: Use <cite>

Variants

Default

Wavy red underline indicating a spelling error or annotation.

The word mispeled has a spelling error.

<u>mispeled</u>

Live Examples

Spelling Errors

Common misspellings: recieve (receive), seperate (separate), occured (occurred)

Spell-Check Demonstration

The spell checker found errors in the following words:

"I beleive this is the definately the best approch."

Corrected: "I believe this is definitely the best approach."

Grammar Teaching

Incorrect: "Their going too the store."

Correct: "They're going to the store."

Chinese Proper Names

In Chinese typography, proper names are traditionally underlined.

Li Bai shi Tang dai zhu ming shi ren.

(Li Bai was a famous Tang dynasty poet.)

Educational Content

Find and correct the spelling errors in this sentence:

"The goverment anounced new regulashions today."

Comparison: When NOT to Use u

For emphasis, use: emphasized text or strong text

For work titles, use: The Great Gatsby

For insertions, use: inserted text

CSS Properties

Property Value
text-decoration underline
text-decoration-style wavy
text-decoration-color oklch(55% 0.2 25) (red)

Accessibility

  • Screen readers: Typically do NOT announce the underline styling
  • Visual-only cue: The wavy underline is a visual indicator only
  • Context is crucial: Provide text context to explain why text is marked
  • Don't rely solely on styling: Add explanatory text for important annotations

Making Annotations Accessible

For educational content, provide explicit text:

The word "recieve" should be spelled "receive".

<p>The word "<u>recieve</u>" <span class="visually-hidden">(misspelled)</span> should be spelled "receive".</p>

Historical Context

The <u> element has an interesting history:

  • HTML4: Purely presentational, meant "underline"
  • XHTML 1.0 Strict: Deprecated, not recommended
  • HTML5: Redefined with semantic meaning for "unarticulated annotation"

Modern usage focuses on the semantic meaning rather than just visual underlines.

Related Elements

  • <ins> - For inserted text (underlined but different meaning)
  • <em> - For emphasis (don't use u for emphasis)
  • <mark> - For highlighting relevant text
  • <abbr> - For abbreviations (has dotted underline)

Underline Styles: Quick Reference

Element Underline Style Use Case
<u> Wavy red Spelling errors, Chinese proper names
<ins> Solid bottom border (green) Inserted/added text
<a> Solid underline (blue) Hyperlinks
<abbr> Dotted Abbreviations with tooltip