Learn how to use the <u> element for non-textual annotations while avoiding confusion with hyperlinks.
What it is
The <u> element represents a span of text that should be rendered with an underline. In modern HTML5, this element is strictly reserved for non-textual annotations, such as misspelled words in spell-checkers or proper nouns in Chinese text. It is not intended for general styling or emphasis. Historically, <u> was used purely for visual formatting, but semantic HTML now discourages using it for decoration because underlines are universally associated with clickable links.
Why it matters
- Accessibility: Screen readers may announce underlined text differently depending on context; misuse can confuse users relying on audio cues.
- User Experience: Users instinctively click underlined text expecting navigation. If nothing happens, they perceive the site as broken.
- Semantic Clarity: Using
<u>correctly signals specific linguistic or editorial intent rather than arbitrary design choices. - Maintainability: Separating content from presentation allows CSS to handle visual styles without cluttering HTML structure.
Syntax or steps
To apply an underline semantically, wrap the target text in opening and closing <u> tags. Ensure the content inside represents a valid annotation case (e.g., a typo). For purely visual underlining, avoid <u> and use CSS instead.
Example
<p>The quick brown fox jumps over the lazy dog.</p>
<p>This sentence has a <u>mistake</u> in it.</p>
<p>Proper noun example: <u>Beijing</u> is the capital of China.</p>In this example, the word "mistake" is underlined to indicate a spelling error detected by a tool. The word "Beijing" is underlined to denote a proper noun, which is a common convention in certain East Asian typographic traditions. Note that these underlines carry meaning beyond mere decoration.
Common mistakes
- Using
<u>for headings: Never use<u>to make text look like a title. Use<h1>through<h6>tags instead. - Confusing with links: Do not underline random phrases just because you like the look. This breaks user expectations regarding interactivity.
- Nesting incorrectly: Avoid nesting
<u>inside other inline elements unnecessarily if CSS can achieve the same result more cleanly. - Ignoring CSS alternatives: For decorative underlines, use
text-decoration: underline;in CSS rather than the HTML element.
When to use it
Compare <u> with CSS-based underlining to determine the right approach for your needs.
| Method | Best For | Reason |
|---|---|---|
<u> element |
Spell-check errors, proper nouns, specific annotations | Conveys semantic meaning about the text's status or category. |
CSS text-decoration |
General styling, hover effects, decorative lines | Keeps content separate from presentation; easier to maintain. |
Practice
Guided Exercise: Write a paragraph where one word is marked as a spelling error using <u>. Then, write another paragraph where a company name is underlined using CSS only.
Challenge: Create a simple form validation message that uses <u> to highlight the exact field label containing an error, ensuring screen readers interpret the underline as an annotation rather than a link.
Quick check
Question: Should you use <u> to underline a section header for visual appeal?
Answer: No. Use appropriate heading tags (<h2>, etc.) and style them with CSS if needed. <u> is for semantic annotations only.
Summary
The <u> element is a specialized tool for indicating non-textual annotations like typos or proper nouns, not for general decoration. Misusing it creates accessibility barriers and confuses users who expect underlined text to be interactive. Always prefer CSS for visual styling and reserve <u> for cases where the underline carries specific semantic weight.