initial commit

1 files changed, 200 insertions, 0 deletions

diff --git a/files/ru/web/html/element/u/index.html b/files/ru/web/html/element/u/index.html
new file mode 100644
index 0000000000..814e23532f
--- /dev/null
+++ b/files/ru/web/html/element/u/index.html
@@ -0,0 +1,200 @@
+---
+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>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<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>