-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
208 lines (150 loc) · 6.54 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
---
title: "<u>: The Unarticulated Annotation (Underline) element"
slug: Web/HTML/Element/u
page-type: html-element
browser-compat: html.elements.u
---
{{HTMLSidebar}}
The **`<u>`** [HTML](/en-US/docs/Web/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 simple 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 {{cssxref("text-decoration")}} property set to `underline`.
{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}
See the [Usage notes](#usage_notes) section for further details on when it's appropriate to use `<u>` and when it isn't.
## Attributes
This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
## Usage notes
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.
> **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.
### Use cases
Valid use cases for the `<u>` element include annotating spelling errors, applying a [proper name mark](https://en.wikipedia.org/wiki/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.
### Other elements to consider using
In most cases, you should use an element other than `<u>`, such as:
- {{HTMLElement("em")}} to denote stress emphasis
- {{HTMLElement("b")}} to draw attention to text
- {{HTMLElement("mark")}} to mark key words or phrases
- {{HTMLElement("strong")}} to indicate that text has strong importance
- {{HTMLElement("cite")}} to mark the titles of books or other publications
- {{HTMLElement("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 {{HTMLElement("ruby")}} element.
To apply an underlined appearance without any semantic meaning, use the {{cssxref("text-decoration")}} property's value `underline`.
## Examples
### Indicating a spelling error
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.
#### HTML
```html
<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".
#### CSS
```css
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`.
#### Result
The result should be familiar to anyone who has used any of the more popular word processors available today.
{{EmbedLiveSample("Indicating_a_spelling_error", 650, 80)}}
### 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.
#### Non-semantic underlines
To underline text without implying any semantic meaning, use a {{HTMLElement("span")}} element with the {{cssxref("text-decoration")}} property set to `"underline"`, as shown below.
##### HTML
```html
<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots
```
##### CSS
```css
.underline {
text-decoration: underline;
}
```
##### Result
{{EmbedLiveSample("Non-semantic_underlines", 650, 80)}}
#### Presenting a book title
Book titles should be presented using the {{HTMLElement("cite")}} element instead of `<u>` or even `<i>`.
##### Using the cite element
```html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
```
{{EmbedLiveSample("Using_the_cite_element", 650, 80)}}
##### Styling the cite element
The default styling for the `<cite>` element renders the text in italics. You can override that using CSS:
```html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
```
```css
cite {
font-style: normal;
text-decoration: underline;
}
```
{{EmbedLiveSample("Styling_the_cite_element", 650, 80)}}
## Technical summary
<table class="properties">
<tbody>
<tr>
<th scope="row">
<a href="/en-US/docs/Web/HTML/Content_categories"
>Content categories</a
>
</th>
<td>
<a href="/en-US/docs/Web/HTML/Content_categories#flow_content"
>Flow content</a
>,
<a href="/en-US/docs/Web/HTML/Content_categories#phrasing_content"
>phrasing content</a
>, palpable content.
</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td>
<a href="/en-US/docs/Web/HTML/Content_categories#phrasing_content"
>Phrasing content</a
>.
</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>None, both the starting and ending tag are mandatory.</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>
Any element that accepts
<a href="/en-US/docs/Web/HTML/Content_categories#phrasing_content"
>phrasing content</a
>.
</td>
</tr>
<tr>
<th scope="row">Implicit ARIA role</th>
<td>
<code
><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role"
>generic</a
></code
>
</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>Any</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- The {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}}, and {{HTMLElement("cite")}} elements should usually be used instead.
- The CSS {{cssxref("text-decoration")}} property should be used for non-semantic underlining.