u

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

Description

The  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  or 
For links — underlines on links can confuse with 
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:

<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)
 — Highlighted text (background, not underline)

u