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
|
<header><h1><u>: The Unarticulated Annotation (Underline) element</h1></header><div class="section-content">
<p>The <code><u></code> <a href="../index">HTML</a> 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.</p> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property set to <code>underline</code>.</p> </div>
</div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/u.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>See the <a href="#usage_notes">Usage notes</a> section for further details on when it's appropriate to use <code><u></code> and when it isn't.</p>
</div>
<h2 id="attributes">Attributes</h2>
<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div>
<h2 id="usage_notes">Usage notes</h2>
<div class="section-content">
<p>Along with other pure styling elements, the original HTML Underline (<code><u></code>) element was deprecated in HTML 4; however, <code><u></code> was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Avoid using the <code><u></code> 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.</p> </div>
</div>
<h3 id="use_cases">Use cases</h3>
<div class="section-content">
<p>Valid use cases for the <code><u></code> element include annotating spelling errors, applying a <a href="https://en.wikipedia.org/wiki/Proper_name_mark" target="_blank">proper name mark</a> to denote proper names in Chinese text, and other forms of annotation.</p> <p>You should <em>not</em> use <code><u></code> to underline text for presentation purposes, or to denote titles of books.</p>
</div>
<h3 id="other_elements_to_consider_using">Other elements to consider using</h3>
<div class="section-content">
<p>In most cases, you should use an element other than <code><u></code>, such as:</p> <ul> <li>
<a href="em"><code><em></code></a> to denote stress emphasis</li> <li>
<a href="b"><code><b></code></a> to draw attention to text</li> <li>
<a href="mark"><code><mark></code></a> to mark key words or phrases</li> <li>
<a href="strong"><code><strong></code></a> to indicate that text has strong importance</li> <li>
<a href="cite"><code><cite></code></a> to mark the titles of books or other publications</li> <li>
<a href="i"><code><i></code></a> to denote technical terms, transliterations, thoughts, or names of vessels in Western texts</li> </ul> <p>To provide textual annotations (as opposed to the non-textual annotations created with <code><u></code>), use the <a href="ruby"><code><ruby></code></a> element.</p> <p>To apply an underlined appearance without any semantic meaning, use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property's value <code>underline</code>.</p>
</div>
<h2 id="examples">Examples</h2>
<h3 id="indicating_a_spelling_error">Indicating a spelling error</h3>
<div class="section-content">
<p>This example uses the <code><u></code> 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> <h4 id="html">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="JYfqiR5W3qppbN5ulAJs3FVGHbMT9jxksTSiMceyVEE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This paragraph includes a <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>u</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spelling<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>wrnogly<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>u</span><span class="token punctuation">></span></span> spelled word.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <p>In the HTML, we see the use of <code><u></code> with a class, <code>spelling</code>, which is used to indicate the misspelling of the word "wrongly".</p> <h4 id="css">CSS</h4> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="dKcteSUJM1HU1FcZqhqAJkYjKSuMX+gr9Jt3bHTSWHI=" data-language="css"><span class="token selector">u.spelling</span> <span class="token punctuation">{</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> red wavy underline<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div> <p>This CSS indicates that when the <code><u></code> element is styled with the class <code>spelling</code>, 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 <code>red dashed underline</code>.</p> <h4 id="result">Result</h4> <p>The result should be familiar to anyone who has used any of the more popular word processors available today.</p>
<div class="code-example" id="sect3">
<iframe class="sample-code-frame" title="Indicating a spelling error sample" id="frame_indicating_a_spelling_error" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/u/runner.html?id=indicating_a_spelling_error" loading="lazy"></iframe>
</div>
</div>
<h3 id="avoiding_u">Avoiding <u></h3>
<div class="section-content">
<p>Most of the time, you actually don't want to use <code><u></code>. Here are some examples that show what you should do instead in several cases.</p> <h4 id="non-semantic_underlines">Non-semantic underlines</h4> <p>To underline text without implying any semantic meaning, use a <a href="span"><code><span></code></a> element with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property set to <code>"underline"</code>, as shown below.</p> <h5 id="html_2">HTML</h5> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="9XcB15mQ8LktEFzDTS/pHleaGVi1POMKlUzF95qnK38=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>underline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Today's Special<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
Chicken Noodle Soup With Carrots
</pre>
</div> <h5 id="css_2">CSS</h5> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="lhjHvumCvagO0Wocf88gqstu9IJJa8ICORUDDKkqpbs=" data-language="css"><span class="token selector">.underline</span> <span class="token punctuation">{</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div> <h5 id="result_2">Result</h5>
<div class="code-example" id="sect4">
<iframe class="sample-code-frame" title="Non-semantic underlines sample" id="frame_non-semantic_underlines" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/u/runner.html?id=non-semantic_underlines" loading="lazy"></iframe>
</div> <h4 id="presenting_a_book_title">Presenting a book title</h4> <p>Book titles should be presented using the <a href="cite"><code><cite></code></a> element instead of <code><u></code> or even <code><i></code>.</p> <h5 id="using_the_cite_element">Using the cite element</h5> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="IvAbWaSpyzx2PfuOIlRUZE586Uu0qCCEghIgmYP9un4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The class read <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span>Moby Dick<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span> in the first term.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div>
<div class="code-example" id="sect5">
<iframe class="sample-code-frame" title="Using the cite element sample" id="frame_using_the_cite_element" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/u/runner.html?id=using_the_cite_element" loading="lazy"></iframe>
</div> <h5 id="styling_the_cite_element">Styling the cite element</h5> <p>The default styling for the <code><cite></code> element renders the text in italics. You can override that using CSS:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="IvAbWaSpyzx2PfuOIlRUZE586Uu0qCCEghIgmYP9un4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The class read <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span>Moby Dick<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span> in the first term.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="KOazMaZHLmsqODOwqfdrIpKB0RsMGpSDYiXqA8AAy3Q=" data-language="css"><span class="token selector">cite</span> <span class="token punctuation">{</span>
<span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div>
<div class="code-example" id="sect6">
<iframe class="sample-code-frame" title="Styling the cite element sample" id="frame_styling_the_cite_element" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/u/runner.html?id=styling_the_cite_element" loading="lazy"></iframe>
</div>
</div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>
<a href="../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="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/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><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-u-element">HTML Standard <br><small># the-u-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody><tr>
<th><code>u</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes"><details><summary>1</summary>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr></tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li>The <a href="span"><code><span></code></a>, <a href="i"><code><i></code></a>, <a href="em"><code><em></code></a>, <a href="b"><code><b></code></a>, and <a href="cite"><code><cite></code></a> elements should usually be used instead.</li> <li>The CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property should be used for non-semantic underlining.</li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u</a>
</p>
</div>
|
