path: root/files/ru/web/html/element/u/index.html

---
title: '<u>: Элемент слабой аннотации (подчёркивание)'
slug: Web/HTML/Element/u
translation_of: Web/HTML/Element/u
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">The HTML <strong>Unarticulated Annotation Element</strong> (<strong><code>&lt;u&gt;</code></strong>) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.</span> This is rendered by default as a simple solid underline, but may be altered using CSS.</p>

<div class="warning">
<p>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 <code>underline</code>.</p>
</div>

<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div>



<p>See the {{anch("Usage notes")}} section for further details on when it's appropriate to use <code>&lt;u&gt;</code> and when it isn't.</p>

<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>{{no_tag_omission}}</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">Permitted ARIA roles</th>
   <td>Any</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибуты">Атрибуты</h2>

<p>This element only includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>

<h2 id="Использование">Использование</h2>

<p>Along with other pure styling elements, the original HTML Underline (<code>&lt;u&gt;</code>) element was deprecated in HTML 4; however, <code>&lt;u&gt;</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="note">
<p>Be careful to avoid using the <code>&lt;u&gt;</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>

<h3 id="Use_cases">Use cases</h3>

<p>Valid use cases for the <code>&lt;u&gt;</code> element include annotating spelling errors, applying a {{interwiki("wikipedia", "proper name mark")}} to denote proper names in Chinese text, and other forms of annotation.</p>

<p>You should <em>not</em> use <code>&lt;u&gt;</code> to simply underline text for presentation purposes, or to denote titles of books.</p>

<h3 id="Other_elements_to_consider_using">Other elements to consider using</h3>

<p>In most cases, you should use an element other than <code>&lt;u&gt;</code>, such as:</p>

<ul>
 <li>{{HTMLElement("em")}} to denote stress emphasis</li>
 <li>{{HTMLElement("b")}} to draw attention to text</li>
 <li>{{HTMLElement("mark")}} to mark key words or phrases</li>
 <li>{{HTMLElement("strong")}} to indicate that text has strong importance</li>
 <li>{{HTMLElement("cite")}} to mark the titles of books or other publications</li>
 <li>{{HTMLElement("i")}} 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>&lt;u&gt;</code>), use the {{HTMLElement("ruby")}} element.</p>

<p>To apply an underlined appearance without any semantic meaning, use the {{cssxref("text-decoration")}} property's value <code>underline</code>.</p>

<h2 id="Примеры">Примеры</h2>

<h3 id="Indicating_a_spelling_error">Indicating a spelling error</h3>

<p>This example uses the <code>&lt;u&gt;</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>

<pre class="brush: html">&lt;p&gt;This paragraph includes a &lt;u class="spelling"&gt;wrnogly&lt;/u&gt;
spelled word.&lt;/p&gt;</pre>

<p>In the HTML, we see the use of <code>&lt;u&gt;</code> with a class, <code>spelling</code>, which is used to indicate the misspelling of the word "wrongly".</p>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">u.spelling {
  text-decoration: red wavy underline;
}</pre>

<p>This CSS indicates that when the <code>&lt;u&gt;</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>

<p>{{EmbedLiveSample("Indicating_a_spelling_error", 650, 80)}}</p>

<h3 id="Avoiding_&lt;u>">Avoiding &lt;u&gt;</h3>

<p>Most of the time, you actually don't want to use <code>&lt;u&gt;</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 {{HTMLElement("span")}} element with the {{cssxref("text-decoration")}} property set to <code>"underline"</code>, as shown below.</p>

<h5 id="HTML_2">HTML</h5>

<pre class="brush: html">&lt;span class="underline"&gt;Today's Special&lt;/span&gt;
&lt;br&gt;
Chicken Noodle Soup With Carrots</pre>

<h5 id="CSS_2">CSS</h5>

<pre class="brush: css">.underline {
  text-decoration: underline;
}</pre>

<h5 id="Result_2">Result</h5>

<p>{{EmbedLiveSample("Non-semantic_underlines", 650, 80)}}</p>

<h4 id="Presenting_a_book_title">Presenting a book title</h4>

<div id="example-unstyled-cite">
<p>Book titles should be presented using the {{HTMLElement("cite")}} element instead of <code>&lt;u&gt;</code> or even <code>&lt;i&gt;</code>.</p>

<h5 id="HTML_3">HTML</h5>

<pre class="brush: html">&lt;p&gt;The class read &lt;cite&gt;Moby Dick&lt;/cite&gt; in the first term.&lt;/p&gt;</pre>

<h5 id="Result_with_default_style">Result with default style</h5>

<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p>
</div>

<p>Note that the default styling for the <code>&lt;cite&gt;</code> element renders the text in italics. You can, if you wish, override that using CSS:</p>

<pre class="brush: css">cite {
  font-style: normal;
  text-decoration: underline;
}</pre>

<h5 id="Result_with_custom_style">Result with custom style</h5>

<p>{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}</p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-u-element', '&lt;u&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '&lt;u&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<p>{{Compat("html.elements.u")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>The {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}}, and {{HTMLElement("cite")}} elements should usuallly be used instead.</li>
 <li>The CSS {{cssxref("text-decoration")}} property should be used for non-semantic underlining.</li>
</ul>