HTML <u> Tag and Underline Text with CSS

The HTML <u> element is valid in modern HTML, but it is not simply a styling tag for making text look underlined. It represents text with a non-textual annotation, such as marking a misspelled word or another conventionally annotated span of text.

If your goal is only to add a visual underline, use CSS text-decoration instead.

Basic <u> Example Top ↑

<p>This sentence contains a <u>misspelled</u> word.</p>

Browsers normally render <u> with an underline, but the element's purpose is semantic annotation rather than general decoration.

Underline Text with CSS Top ↑

For ordinary visual underlining, apply CSS to a semantic element such as <span>, <p> or a heading.

<style>
.underline {
  text-decoration: underline;
}
</style>

<p>Learn <span class=\"underline\">web programming</span> at plus2net.</p>

Inline CSS also works when a one-off style is appropriate:

<span style=\"text-decoration: underline;\">Underlined text</span>

Rendered output: Underlined text

When Should You Use <u>? Top ↑

Use <u> when the text itself has an annotation that is not expressed as normal prose. A common example is marking a spelling error:

<p>Please correct the <u class=\"spelling\">eror</u> in this sentence.</p>

<style>
u.spelling {
  text-decoration: red wavy underline;
}
</style>

For other meanings, choose the element that matches the content: <strong> for strong importance, <em> for stress emphasis, <mark> for highlighted relevance, and CSS when you only want a visual underline.

Customize an Underline with CSS Top ↑

Style, Color and Thickness Top ↑

CSS provides much more control than relying on the default underline.

<style>
.custom-underline {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}
</style>

Underline Offset and Position Top ↑

text-underline-offset controls the distance between the text and underline. text-underline-position can influence underline placement.

<style>
.readable-underline {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-underline-position: under;
}
</style>

Skipping Descenders Top ↑

text-decoration-skip-ink controls whether an underline skips parts of letters such as the descenders in g and y.

<style>
.skip-ink {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
</style>

Underlines and Hyperlinks Top ↑

Users commonly associate underlined text with links. Avoid styling ordinary non-clickable text so that it looks like a hyperlink unless the underline has a clear semantic reason.

Conversely, do not remove link affordances without providing another obvious visual indication that the text is interactive. See the HTML hyperlink tutorial for link markup and behavior.

Existing Underline Demos Top ↑

The original Plus2net examples are retained for experimenting with CSS applied to underlined text:

Common Mistakes Top ↑

Calling <u> a deprecated tag Top ↑

<u> is valid HTML today. What changed is its meaning: it should represent an annotation rather than being used only for decorative underlining.

Using <u> only because you want a line Top ↑

Use CSS text-decoration when the underline is purely visual.

Making non-links look like links Top ↑

Underlined text can be mistaken for clickable content, so use decorative underlining carefully.

Using an invented element name just for styling Top ↑

The old example used a custom <my_text> element only to apply CSS. Use a normal semantic element or <span class="..."> instead.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: