HTML <u> Tag

What You’ll Learn

The <u> tag underlines text in HTML. This guide covers HTML5 semantics, syntax, styling with CSS, comparisons with similar tags, and beginner-friendly examples.

What Is the <u> Tag?

The <u> element is an inline HTML tag that renders enclosed text with an underline. In HTML5, it represents an unarticulated non-textual annotation—text marked for a reason that is not spelled out in the content itself.

Browsers apply a default underline to <u> content. You can customize the appearance with CSS text-decoration properties while keeping the semantic meaning intact.

<p>You misspelled <u>recieve</u> — the correct spelling is <em>receive</em>.</p>

📝 Syntax

Enclose the text you want underlined between opening and closing <u> tags:

<u>Underlined Text Here</u>

• <u> is an inline element—it nests inside paragraphs, headings, and lists.
• Self-closing syntax (<u />) is not valid in HTML.
• Style underlines with CSS instead of deprecated presentational attributes.

⚖️ <u> vs <ins> vs <em>

These tags can all affect how text looks, but each carries a different meaning:

🎨 CSS Underline Styling

Modern CSS gives you fine control over underline appearance:

.fancy-underline {
  text-decoration-color: #ef4444;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.spell-mark {
  text-decoration-style: wavy;
  text-decoration-color: #dc2626;
}

For purely decorative underlines with no semantic meaning, a <span> with CSS is also acceptable.

Examples Gallery

Three practical patterns from basic underlines to styled text. Remember: in HTML5, use u for annotations—not general emphasis.

<u class="highlight" style="text-decoration-color: #007bff;">Styled Underline Text</u>

<p>This is an <u>important</u> message.</p>

<style>
  .fancy-underline {
    text-decoration-color: red;
    text-decoration-thickness: 2px;
  }
</style>
<p>Explore our <u class="fancy-underline">creative</u> collection.</p>

<p>
  You misspelled <u>recieve</u> — the correct spelling is <em>receive</em>.
</p>

♿ Accessibility

Underlined text needs careful use so readers are not confused:

• Avoid link confusion — links are underlined by default; extra underlines can mislead users
• Do not overuse — excessive underlining reduces readability and visual hierarchy
• Use semantic tags — pick em, strong, or ins when meaning matters
• Ensure contrast — colored underlines must meet WCAG contrast guidelines against the background
• Provide context — explain spelling annotations or labels near the underlined text

💡 Best Practices