<u>

  • Revision slug: Web/HTML/Element/u
  • Revision title: <u>
  • Revision id: 473005
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Editorial review

Revision Content

Summary

The HTML Underline Element (<u>) renders text with an underline, a line under the baseline of its content.

In HTML5, this element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelled.

Usage Note: As an all purely styling element, {{ HTMLElement("u") }} has been deprecated in HTML 4 and XHTML 1, but it has been re-introduced in HTML5 with other semantics. If you want to underline text in a non-semantic manner, you should use a {{ HTMLElement("span") }} element, or another semantically appropriate element, and style it with the CSS {{ cssxref("text-decoration") }} property, with the underline value.

Attributes

This element only includes the global attributes.

Tips and Notes

Tip: Avoid using the {{ HTMLElement("u") }} element where it could be confused for a hyperlink.

Note: The HTML 5 specification reminds developers that other elements are almost always more appropriate than {{ HTMLElement("u") }}.

DOM interface

This element implements the HTMLElement interface.

Implementation note: up to Gecko 1.9.2 inclusive, Firefox implements the {{ domxref("HTMLSpanElement") }} interface for this element.

Example

<u>Today's Special</u>: Salmon<br />
<span style="text-decoration:underline;">Today's Special</span>: Salmon

Today's Special: Salmon

Today's Special: Salmon

<p><u>All</u> of that is explained in <u>Dive into Python</u>.

All of that is explained in Dive into Python.

should instead be

<p><em>All</em> of that is explained in <cite>Dive into Python</cite>.

All of that is explained in Dive into Python.

CSS can be used to style those elements exactly the same, however.

See Also

  • The {{ HTMLElement("span") }}, {{ HTMLElement("i") }}, {{ HTMLElement("em") }}, and {{ HTMLElement("cite") }} elements are, depending on the case, to be used instead.
  • The CSS {{ cssxref("text-decoration") }} property is to be used to achieve the former visual aspect of the {{ HTMLElement("u") }} element.
{{ HTML:Element_Navigation() }}
{{ languages({"ja":"ja/HTML/Element/u","en":"en/HTML/Element/u"}) }}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <em>HTML Underline Element</em> (<code>&lt;u&gt;</code>) renders text with an underline, a line under the baseline of its content.</p>
<p>In HTML5, this element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelled.</p>
<div class="note">
  <strong>Usage Note: </strong>As an all purely styling element, {{ HTMLElement("u") }} has been deprecated in HTML 4 and XHTML 1, but it has been re-introduced in HTML5 with other semantics. If you want to underline text in a non-semantic manner, you should use a {{ HTMLElement("span") }} element, or another semantically appropriate element, and style it with the <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("text-decoration") }} property, with the <span style="font-family: Courier New;">underline</span> value.</div>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element only includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<h2 id="Tips_and_Notes">Tips and Notes</h2>
<p style="line-height: 21px;"><b>Tip:</b>&nbsp;Avoid using the {{ HTMLElement("u") }} element where it could be confused for a hyperlink.</p>
<div class="note">
  <p><span style="line-height: 21px;"><strong>Note:</strong>&nbsp;The HTML 5 specification reminds developers that other elements are almost always more appropriate than {{ HTMLElement("u") }}.</span></p>
</div>
<h2 id="DOM_interface">DOM interface</h2>
<p>This element implements the <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> interface.</p>
<div class="note">
  <strong>Implementation note: </strong>up to Gecko 1.9.2 inclusive, Firefox implements the {{ domxref("HTMLSpanElement") }} interface for this element.</div>
<h2 id="Example">Example</h2>
<pre class="eval">
&lt;u&gt;Today's Special&lt;/u&gt;: Salmon&lt;br /&gt;
&lt;span style="text-decoration:underline;"&gt;Today's Special&lt;/span&gt;: Salmon
</pre>
<p><u>Today's Special</u>: Salmon</p>
<p><span style="text-decoration: underline;">Today's Special</span>: Salmon</p>
<pre>
&lt;p&gt;&lt;u&gt;All&lt;/u&gt; of that is explained in &lt;u&gt;Dive into Python&lt;/u&gt;.
</pre>
<p><u>All</u> of that is explained in <u>Dive into Python</u>.</p>
<p>should instead be</p>
<pre>
&lt;p&gt;&lt;em&gt;All&lt;/em&gt; of that is explained in &lt;cite&gt;Dive into Python&lt;/cite&gt;.
</pre>
<p><em>All</em> of that is explained in <cite>Dive into Python</cite>.</p>
<p>CSS can be used to style those elements exactly the same, however.</p>
<h2 id="See_Also">See Also</h2>
<ul>
  <li>The {{ HTMLElement("span") }}, {{ HTMLElement("i") }}, {{ HTMLElement("em") }}, and {{ HTMLElement("cite") }} elements are, depending on the case, to be used instead.</li>
  <li>The CSS&nbsp;{{ cssxref("text-decoration") }} property is to be used to achieve the former visual aspect of the {{ HTMLElement("u") }} element.</li>
</ul>
<div>
  {{ HTML:Element_Navigation() }}</div>
<div>
  {{ languages({"ja":"ja/HTML/Element/u","en":"en/HTML/Element/u"}) }}</div>
Revert to this revision