Vanilla Breeze

u

Represents an unarticulated annotation — typically spelling errors or Chinese proper names. Styled with a wavy red underline in Vanilla Breeze.

Description

The <u> element represents an "unarticulated annotation" — a non-textual annotation that is rendered visually but not spoken. In HTML5, it was redefined from the old "underline" element to serve specific semantic use cases.

VB styles it with a wavy red underline using oklch(55% 0.2 25), matching the familiar spell-check convention. This distinguishes it clearly from the five other underline styles in VB's text system.

When to Use

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

When NOT to Use

  • For emphasis — use <em> or <strong>
  • For links — underlines on links can confuse with <u>
  • For decorative underlines — use CSS text-decoration
  • For book titles — use <cite>
  • For inserted text — use <ins>

Examples

VB Underline Styles

VB uses six distinct underline styles across its text elements. Each has a unique visual treatment so users can distinguish their meaning at a glance:

Element Style Color Use Case
<u> Wavy Red (oklch(55% 0.2 25)) Spelling errors, annotations
<a> Solid (1px→2px on hover) var(--color-interactive) Hyperlinks
<abbr> Dotted var(--color-text-muted) Abbreviations with tooltip
<ins> Solid bottom border Green (oklch(60% 0.18 145)) Inserted text (editorial)
<s> Line-through var(--color-text-muted) No longer relevant
<del> Line-through + background Red (oklch(55% 0.2 25)) Deleted text (editorial)

CSS Reference

The wavy style with red color matches the universal spell-check convention used by browsers, word processors, and IDEs.

Accessibility

  • Screen readers typically do not announce the underline
  • The visual is a cue only — provide text context for important annotations
  • For educational content, add visually-hidden context:

Related

  • <ins> — Inserted text (green border underline)
  • <del> — Deleted text (red strikethrough + background)
  • <s> — No longer relevant (muted strikethrough)
  • <a> — Hyperlinks (blue solid underline)
  • <abbr> — Abbreviations (dotted muted underline)
  • <mark> — Highlighted text (background, not underline)
↑