From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/html/element/u/index.html | 200 +++++++++++++++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 files/ru/web/html/element/u/index.html (limited to 'files/ru/web/html/element/u') 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: ': Элемент слабой аннотации (подчеркивание)' +slug: Web/HTML/Element/u +translation_of: Web/HTML/Element/u +--- +
{{HTMLRef}}
+ +

The HTML Unarticulated Annotation Element (<u>) 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.

+ +
+

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 {{anch("Usage notes")}} section for further details on when it's appropriate to use <u> and when it isn't.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, palpable content.
Permitted contentPhrasing content.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts phrasing content.
Permitted ARIA rolesAny
DOM interface{{domxref("HTMLElement")}}
+ +

Аттрибуты

+ +

This element only includes the global attributes.

+ +

Использование

+ +

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.

+ +
+

Be careful to 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 {{interwiki("wikipedia", "proper name mark")}} to denote proper names in Chinese text, and other forms of annotation.

+ +

You should not use <u> to simply 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:

+ + + +

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.

+ +

Примеры

+ +

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

+ +
<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

+ +
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
+ +
<span class="underline">Today's Special</span>
+<br>
+Chicken Noodle Soup With Carrots
+ +
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>.

+ +
HTML
+ +
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
+ +
Result with default style
+ +

{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}

+
+ +

Note that the default styling for the <cite> element renders the text in italics. You can, if you wish, override that using CSS:

+ +
cite {
+  font-style: normal;
+  text-decoration: underline;
+}
+ +
Result with custom style
+ +

{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-u-element', '<u>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '<u>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}{{Spec2('HTML4.01')}}
+ +

Поддержка браузерами

+ + + +

{{Compat("html.elements.u")}}

+ +

См. также

+ + -- cgit v1.2.3-54-g00ecf