HTML Free Codes<u>
Defines text with unarticulated annotation (underlined)
Definition and Usage
The <u> tag represents text with an unarticulated, though explicitly rendered, non-textual annotation.
In HTML5, the <u> element was redefined to represent text that should be stylistically different from normal text, such as:
- Misspelled words
- Proper names in Chinese text
- Other forms of non-textual annotation
<u> tag is rendered with an underline. However, this can be changed with CSS.
<u> element where it could be confused with a hyperlink. Underlined text is typically associated with links, so use it sparingly and style it differently from links when necessary.
<em> or <strong>. For marking text, use <mark>. For inserted text, use <ins>.
Browser Support
The <u> tag is supported in all major browsers:
Attributes
The <u> tag supports the Global Attributes in HTML.
The <u> tag also supports the Event Attributes in HTML.
Examples
Basic Underline
Create basic underlined text:
Example
<p>This is <u>underlined text</u> in a paragraph.</p>Proper Names (Chinese Text)
Marking proper names in Chinese text (a common use case in HTML5):
Example
<p>The conference was held in <u>εδΊ¬</u> (Beijing).</p>Misspelled Words
Indicating misspelled words:
Example
<p>This word is <u class="spelling-error">mispeled</u>.</p>
<style>
.spelling-error {
text-decoration: underline wavy red;
}
</style>Underlined Text with Custom Styling
Style the underline differently from the default:
Example
<style>
.custom-underline {
text-decoration: underline;
text-decoration-color: #745af2;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
</style>
<p>This is <u class="custom-underline">custom underlined</u> text.</p>Semantic Alternatives to Underline
Use more semantic tags when appropriate:
Example
<!-- For emphasis, use <em> or <strong> -->
<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>important</strong> text.</p>
<!-- For highlighting, use <mark> -->
<p>This is <mark>highlighted</mark> text.</p>
<!-- For inserted text, use <ins> -->
<p>This is <ins>inserted</ins> text.</p>Avoiding Link Confusion
Style underlined text to avoid confusion with links:
Example
<style>
/* Links are blue and underlined */
a {
color: #0066cc;
text-decoration: underline;
}
/* Underlined text uses a different color and style */
u {
text-decoration: underline dotted;
text-decoration-color: #666;
color: inherit;
}
</style>
<p>This is a <a href="#">link</a> and this is <u>underlined text</u>.</p>Multiple Underline Styles
Different underline styles using CSS:
Example
<style>
.underline-solid {
text-decoration: underline solid;
}
.underline-dotted {
text-decoration: underline dotted;
}
.underline-dashed {
text-decoration: underline dashed;
}
.underline-wavy {
text-decoration: underline wavy;
}
.underline-double {
text-decoration: underline double;
}
</style>
<p><u class="underline-solid">Solid underline</u></p>
<p><u class="underline-dotted">Dotted underline</u></p>
<p><u class="underline-dashed">Dashed underline</u></p>
<p><u class="underline-wavy">Wavy underline</u></p>
<p><u class="underline-double">Double underline</u></p>HTML5 Redefinition
In HTML 4, the <u> tag was used purely for underlining text and was considered presentational. In HTML5, it was redefined with semantic meaning:
- HTML 4: Simple text decoration (underline)
- HTML5: Text with unarticulated, non-textual annotation
<u> tag now has semantic meaning in HTML5, representing text that requires some form of non-textual annotation, not just visual underline.
<u> vs <a> - Underline vs Link
One of the most important considerations when using the <u> tag is avoiding confusion with hyperlinks:
| Tag | Purpose | Visual Appearance |
|---|---|---|
<a> |
Hyperlink to another page or resource | Typically blue and underlined; clickable; changes cursor to pointer |
<u> |
Non-textual annotation (not a link) | Underlined but should be styled differently from links to avoid confusion |
<u> elements differently from <a> elements to prevent user confusion. Users expect underlined text to be clickable links.
When to Use <u>
The <u> tag should be used in specific scenarios:
| Use Case | When to Use <u> | Example |
|---|---|---|
| Chinese proper names | To mark proper names in Chinese text | <u>ζζ</u> |
| Spelling errors | To indicate misspelled words | <u class="spelling">teh</u> |
| Non-textual annotation | When text needs visual distinction without semantic meaning | <u>annotated</u> |
Try it Yourself
Interactive Example
See how underlined text appears:
This is basic underlined text using the <u> tag.
This is a link with underline for comparison.
This is misspelled text with a wavy red underline.
Best Practices
- Avoid for emphasis: Use
<em>or<strong>for emphasis instead of<u> - Use sparingly: Overusing underlines can confuse users who expect underlined text to be links
- Style differently from links: Always distinguish
<u>visually from<a>elements - Consider semantic alternatives: Use
<mark>for highlighting,<ins>for insertions - Add appropriate classes: Use classes to indicate the purpose (e.g., "spelling-error", "proper-name")
- Use for non-textual annotations: Follow HTML5 semantics by using it for unarticulated annotations
- Provide context: When using
<u>, ensure the context is clear to users - Test accessibility: Ensure screen readers handle underlined text appropriately
Alternatives to <u>
Consider these semantic alternatives before using <u>:
| Alternative | Purpose | When to Use |
|---|---|---|
<em> |
Emphasis (usually italic) | When you want to emphasize text |
<strong> |
Strong importance (usually bold) | When text is of strong importance |
<mark> |
Highlighted/marked text | When you want to highlight or mark text for reference |
<ins> |
Inserted text | When showing text that has been added to a document |
<span> |
Generic inline container | When you need custom styling without semantic meaning |
Default CSS Settings
Most browsers will display the <u> element with the following default values:
Default CSS
u {
text-decoration: underline;
}