<u>
Overview
The <u> element marks a segment of inline text with a non-textual annotation, often used for highlighting misspelled words or proper names in specific languages. While typically rendered as a solid underline, this style can be customized using CSS. The annotation applied through the <u> element is distinct from textual annotations that explain or emphasize content, as it conveys information about the text itself.
Examples and Usage
To clarify, the <u> element has evolved in its role within HTML. Historically, it was used to underline text, but with the advent of HTML5, its purpose shifted to marking non-textual annotations such as misspelled words or proper names in specific languages like Chinese. CSS is now the preferred method for simple underlining, reserving the <u> element for more specialized annotations.
A potential and proper use case for the element is to highlight misspelled words within a text. This can be helpful in editorial contexts or educational platforms where identifying incorrect spelling is essential.
Here's an example:
<p>I have a <u>freind</u> who loves to <u>travell</u> around the world.</p>
The browser will render the text between the <u> tags as a solid underline. This will be the default visual cue for the misspelled words.
We can improve this and make the misspellings more noticeable. Many textual editors use a red dashed or wavy underline to indicate spelling errors. Let's turn to CSS and apply a red dashed underline:
<p>I have a <u class="misspelled">freind</u> who loves to <u class="misspelled">travell</u> around the world.</p>
u.misspelled {
text-decoration: red dashed underline;
}
This styling aligns better with common visual cues for spelling errors and provides a clear indication of the text's status.
Attribute Breakdown
The <u> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.
Accessibility Aspects
The <u> element does not have distinct accessibility considerations. According to the specification, it defaults to a role of generic, but this role's usage is discouraged. The element prohibits the use of ARIA naming techniques and allows global aria-* attributes and those applicable to allowed roles.
Associated Elements
Other elements to consider instead of <u> for specific use cases:
<b><cite><em><i><mark><ruby><strong>
Additional Notes
Steer clear of using the
<u>element where it might be confused with hyperlinks, which are also commonly underlined. The explicit rendering of non-textual annotations should be clear and distinct from hyperlink styling.The
<u>element's role has evolved from simply underlining text to marking non-textual annotations. This shift in HTML5 reflects an emphasis on semantic meaning over presentation.Using CSS for underlining or employing other elements for semantic emphasis is generally more aligned with modern web development practices.
Browser Compatibility
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.
| Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
|---|---|---|---|---|---|---|
| Support | Yes | Yes* | Yes* | Yes* | Yes* | Yes* |