Underline: <u> and <ins>
The cardinal rule of web hyperlinks, unarticulated annotations with <u>, and documenting editorial document insertions with <ins>, cite, and datetime.
🎯 Learning Objectives
- Understand why traditional underlines on plain text cause usability confusion with hyperlinks.
- Learn the precise HTML5 semantic definition of the
<u>element (unarticulated annotations, spelling errors). - Implement the
<ins>element to denote editorial insertions and document revisions. - Apply the
citeanddatetimeattributes to record change logs and audit trails. - Style spelling corrections with wavy underlines and contrast inserted text visually and accessibly.
📖 Mental Model: The Legal Redline & The Spellchecker's Squiggle
In print typography, an underline was a way to tell a typewriter typist to set something in italics. On the web, however, the underline was claimed by Tim Berners-Lee as the universal signal for a clickable hyperlink.
Because of this, HTML5 reserved underlining for very specific non-link scenarios:
<ins>(Insertion): The lawyer's green pen adding new clauses to a revised contract.<u>(Unarticulated Annotation): The word processor's red squiggly line flagging a misspelled word or a grammatical note.
1. The Hyperlink Affordance Rule
Since 1991, web users have been conditioned to recognize underlined text as an interactive link. Underlining non-clickable text breaks user expectations, leading to frustrated clicking on "dead" text.
🚨 The Golden Rule of Web Underlines
Never underline plain text simply for visual decoration or emphasis. If you need emphasis, use <em> or <strong>. If you need visual styling, use CSS background colors or borders.
When is <u> Semantically Valid?
In HTML5, the <u> element is officially defined as representing text with an unarticulated, non-textual annotation:
- Spelling errors: Marking misspelled words in a rich text editor (often styled with a wavy red underline).
- Chinese proper name marks: In Chinese typography, a solid underline (zhuanminghao) indicates a person or place name.
- Grammatical annotations: Highlighting vocabulary in linguistics software.
2. Documenting Revisions with <ins>
The <ins> (Insertion) element represents an addition to a document. It is unique in HTML because it can behave as either an inline element or a block wrapper around multiple paragraphs, and it supports two critical metadata attributes:
| Attribute | Type | Description & Example |
|---|---|---|
datetime |
ISO 8601 Timestamp | Records the exact date/time of the insertion: datetime="2026-08-21T09:00:00Z" |
cite |
URL | Points to an explanation document, ticket, or legal agreement explaining why the change was made: cite="https://legal.example.com/amendment-v2" |
3. Interactive Legal Contract & Spellchecker Lab
Observe how <ins> documents contract additions and how custom CSS styles <u> into a realistic spelling error annotation.
🏋️ Hands-On Exercise: Marking Up a Contract Redline Draft
- Wrap the removed subscription price
"$49/month"in a<del>element withdatetime="2026-08-21". - Wrap the newly inserted price
"$39/month"in an<ins>element withdatetime="2026-08-21". - Wrap the misspelled word
"recieved"in a<u>element withstyle="text-decoration: underline wavy red;". - Click ▶ Run Code to test your revision markup.
⚠️ Pitfall: Accessibility with <ins> and <del>
By default, most screen readers do not announce insertions and deletions in standard reading mode to prevent cluttering speech. For critical legal diffs, pair them with accessible labels or helper text (e.g., <span class="sr-only">Inserted text:</span>).
💡 Pro Tip: Customizing <ins> Styling for Clean Diffs
Browsers default <ins> to a standard underline. In modern web apps (like GitHub diffs), it is customary to remove the confusing underline and use a soft green background:
ins {
text-decoration: none;
background-color: #e6fffa;
color: #234e52;
border-bottom: 2px solid #319795;
}
📌 Key Takeaways
- Never underline plain text for emphasis; users will mistake it for a broken link.
<u>represents unarticulated annotations, such as spelling errors or Chinese proper names.<ins>marks editorial insertions and document amendments.<ins>supportsdatetime(ISO 8601) andcite(URL) attributes for audit trails.