Baseline Widely available
The <u>
HTML element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a single solid underline, but may be altered using CSS.
Warning: This element used to be called the "Underline" element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS text-decoration
property set to underline
.
<p>
You could use this element to highlight <u>speling</u> mistakes, so the writer
can <u>corect</u> them.
</p>
p {
margin: 0;
}
u {
text-decoration: #f00 wavy underline;
}
See the Usage notes section for further details on when it's appropriate to use <u>
and when it isn't.
This element only includes the global attributes.
Usage notesAlong with other pure styling elements, the original HTML Underline (<u>
) element was deprecated in HTML 4; however, <u>
was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.
Note: Avoid using the <u>
element with its default styling (of underlined text) in such a way as to be confused with a hyperlink, which is also underlined by default.
Valid use cases for the <u>
element include annotating spelling errors, applying a proper name mark to denote proper names in Chinese text, and other forms of annotation.
You should not use <u>
to underline text for presentation purposes, or to denote titles of books.
In most cases, you should use an element other than <u>
, such as:
<em>
to denote stress emphasis<b>
to draw attention to text<mark>
to mark key words or phrases<strong>
to indicate that text has strong importance<cite>
to mark the titles of books or other publications<i>
to denote technical terms, transliterations, thoughts, or names of vessels in Western textsTo provide textual annotations (as opposed to the non-textual annotations created with <u>
), use the <ruby>
element.
To apply an underlined appearance without any semantic meaning, use the text-decoration
property's value underline
.
This example uses the <u>
element and some CSS to display a paragraph which includes a misspelled error, with the error indicated in the red wavy underline style which is fairly commonly used for this purpose.
<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>
In the HTML, we see the use of <u>
with a class, spelling
, which is used to indicate the misspelling of the word "wrongly".
u.spelling {
text-decoration: red wavy underline;
}
This CSS indicates that when the <u>
element is styled with the class spelling
, it should have a red wavy underline underneath its text. This is a common styling for spelling errors. Another common style can be presented using red dashed underline
.
The result should be familiar to anyone who has used any of the more popular word processors available today.
Avoiding <u>Most of the time, you actually don't want to use <u>
. Here are some examples that show what you should do instead in several cases.
To underline text without implying any semantic meaning, use a <span>
element with the text-decoration
property set to "underline"
, as shown below.
<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots
CSS
.underline {
text-decoration: underline;
}
Result Presenting a book title
Book titles should be presented using the <cite>
element instead of <u>
or even <i>
.
<p>The class read <cite>Moby-Dick</cite> in the first term.</p>
Styling the cite element
The default styling for the <cite>
element renders the text in italics. You can override that using CSS:
<p>The class read <cite>Moby-Dick</cite> in the first term.</p>
cite {
font-style: normal;
text-decoration: underline;
}
Technical summary Specifications Browser compatibility See also
<span>
, <i>
, <em>
, <b>
, and <cite>
elements should usually be used instead.text-decoration
property should be used for non-semantic underlining.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3