HTML
Unarticulated Annotation element
(
<u>
) 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 simple solid underline, but may be altered using CSS.
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
特性被设为
underline
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
见
用法注意事项
section for further details on when it's appropriate to use
<u>
and when it isn't.
| 内容类别 | 流内容 , 措词内容 ，可触及内容。 |
|---|---|
| 准许内容 | 措词内容 . |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts 措词内容 . |
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles | 任何 |
| DOM 接口 |
HTMLElement
|
此元素只包括 全局属性 .
Along 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.
Be careful to 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
使用
<u>
to simply 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 texts
To provide textual annotations (as opposed to the non-textual annotations created with
<u>
), use the
<ruby>
元素。
To apply an underlined appearance without any semantic meaning, use the
text-decoration
property's value
underline
.
此范例使用
<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.
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
特性被设为
"underline"
, as shown below.
<span class="underline">Today's Special</span> <br> Chicken Noodle Soup With Carrots
.underline {
text-decoration: underline;
}
Book titles should be presented using the
<cite>
element instead of
<u>
或者甚至
<i>
.
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
Note that the default styling for the
<cite>
element renders the text in italics. You can, if you wish, override that using CSS:
cite {
font-style: normal;
text-decoration: underline;
}
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
u
|
Chrome 完整支持 Yes | Edge 完整支持 12 |
Firefox
完整支持
1
注意事项
|
IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
见实现注意事项。
<span>
,
<i>
,
<em>
,
<b>
，和
<cite>
elements should usuallly be used instead.
text-decoration
property should be used for non-semantic underlining.