Skip to main content

The <u> Element

As defined in the HTML Living Standard, the <u> element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation.

Visual Example (Spelling Error):

The developer made a mispelling in the documentation comment.

(Note: Traditionally rendered with a solid underline, though wavy lines are common for errors.)

<p>The proper name in this text is annotated.</p> View HTML Living Standard: The u element

Modern Semantic Role

The <u> element was once used purely for underlining text. In modern HTML5, it should only be used when the text has a non-textual annotation.

WCAG Requirement: Use of Color (and Presentation)

Success Criterion 1.4.1 (Level A): Color (or purely visual styling) is not used as the only visual means of conveying information.

The Usability Risk: On the web, underlines are the universal signifier for a hyperlink. Using <u> for non-interactive text can be extremely confusing for all users, particularly those with cognitive disabilities.

Solution: If you must use <u>, ensure the context makes it clear the text is not a link. For spelling errors, consider styling the underline as a wavy or red line (using CSS) to distinguish it from standard blue links.

Understand SC 1.4.1: Use of Color

Styling with SMACSS

Avoid using <u> purely for visual decoration. If you want to underline text for aesthetic reasons, use the CSS text-decoration property on a <span> or other appropriate container.

/* Correcting the visual confusion */ u { text-decoration: underline wavy red; text-decoration-skip-ink: auto; }

A11y Tip: Semantic Alternatives

If you are marking text that is no longer correct, use the <s> (Strikethrough) tag. If you are marking changes in a document edit, use <del> and <ins>. Only use <u> for active annotations that remain part of the text's current state.