u

The HTML <u> element marks a non-textual or conventional annotation, often shown with an underline. For a purely decorative underline, use CSS instead.

What you will learn

When u represents an annotation
How to distinguish it from links, emphasis, and error markers
Why purely decorative underlines belong in CSS

Basic example

<p>The spelling is <u class="spelling-error">recieve</u>.</p>

The underline is a visual convention for an annotation. Explain the meaning in surrounding text or other accessible content; do not rely on the line alone.

Choose the element by meaning

Link: Use a when the text navigates to another resource.
Importance: Use strong for strong importance and em for emphasis.
Highlight: Use mark when text is relevant to the current context, such as a search match.
Annotation: Use u only when the text is a conventional or non-textual annotation.

Use CSS for decoration

.decorative-underline {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
}

If the line exists only to create a visual style, a class and CSS communicate that intent more honestly. Avoid making decorative text look like a link if it is not interactive.

Common mistakes

Using u for every underlined label.
Using it for navigation instead of an a link.
Relying on underline color or shape as the only explanation of an annotation.
Using it for emphasis or importance instead of em or strong.

u

What you will learn

Basic example

Choose the element by meaning

Use CSS for decoration

Common mistakes

Related pages