The <u> tag in HTML is used to render text with a simple underline. Historically, it was commonly used to emphasize text, but with the evolution of web standards, its primary function is now to denote text that is not visually bolded or italicized but requires attention for some reason, such as marking spelling errors or highlighting names. It's crucial to use this tag judiciously to maintain good web accessibility and avoid confusion with links.

Syntax

<u >underlined text</u>

Attributes

Example

<p>This is a sentence with <u>underlined</u> text.</p>

More Examples

Marking Spelling Errors

One of the appropriate uses for the <u> tag is to mark misspelled words or provide annotations. Although not as interactive as spell check it is a great way to highlight such information.

<p>The word 'accomodation' is <u>incorrectly</u> spelled, it should be 'accommodation'.</p>

Highlighting Names

In some contexts, it might be appropriate to use the <u> tag to underline specific names or terms that are crucial to understanding the content, without using bold or italics.

<p>In the contract, <u>John Doe</u> is referred to as the client.</p>

Underlining with Specific Styles via CSS

You can combine CSS with the <u> tag to further customize the appearance. For instance, you can make the underline a different color or add a wavy line effect to denote potential errors.

<style>
  .error {
    text-decoration: underline wavy red;
  }
</style>
<p>This sentence has a <u class="error">potential</u> error.</p>

Underlined Text in a List

The <u> tag can be used within lists or any other HTML structure as you desire.

<ul>
    <li>Item 1: <u>This is an item</u> with underlined text</li>
    <li>Item 2: Another item without underline</li>
</ul>

Browser Support

The <u> tag is supported by all major browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• Avoid for Emphasis: The <u> tag should not be used for emphasizing text. Use <strong> for strong emphasis and <em> for stress emphasis.
• Accessibility: Be cautious using <u> tag, as users might confuse it with hyperlinks. It is not always the best choice for accessibility.
• Styling with CSS: Always consider styling underlines with CSS for better control and modern designs.
• Use Appropriately: Use the <u> tag for unarticulated annotation text where it's clear that it's not a link, avoiding confusion.
• Alternative: For underlining text in modern web design, consider using CSS properties like text-decoration: underline; for more control over appearance and maintainability, instead of the <u> tag.