: Элемент слабой аннотации (подчёркивание) — HTML
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 text-decoration (en-US) property set to underline.
See the Usage notes section for further details on when it’s appropriate to use <u> and when it isn’t.
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 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
<em>to denote stress emphasis<b>to draw attention to text<mark>to mark key words or phrases<strong>to indicate that text has strong importance<cite>to mark the titles of books or other publications- <i> (en-US) to denote technical terms, transliterations, thoughts, or names of vessels in Western texts
To provide textual annotations (as opposed to the non-textual annotations created with <u>), use the <ruby> element.
To apply an underlined appearance without any semantic meaning, use the text-decoration (en-US) 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>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.
Avoiding <u>
<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 <span> element with the text-decoration (en-US) property set to "underline", as shown below.
HTML
<span>Today's Special</span>
<br>
Chicken Noodle Soup With CarrotsCSS
.underline {
text-decoration: underline;
}Result
Presenting a book title
Book titles should be presented using the <cite> element instead of <u> or even 
HTML
<p>The class read <cite>Moby Dick</cite> in the first term.</p>Result with default style
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
BCD tables only load in the browser
Подчеркнутый текст силами HTML и CSS
Серёжа СыроежкинКопирайтер
Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами
Конструктор сайтов <u>"Нубекс"</u>Но данный код считается невалидным, поэтому значительно эффективнее и правильнее использовать CSS-стили для декорации текста.
Подчеркнуть текст — CSS
Как мы уже говорили в статье Зачеркнутый текст, декорации текста задаются при помощи свойства text-decoration. Подчеркнутый текст задается параметром underline:
<!DOCTYPE html> <html> <head> <title>Подчеркнутый текст с помощью CSS - "Нубекс"</title> <meta charset="utf-8"> <style> .underline { text-decoration: underline; } </style> </head> <body> <p>Конструктор сайтов <span>Нубекс"</span></p> </body> </html>
Подчеркнуть текст с помощью CSS можно не только сплошной линией. Посмотрим, какими вариантами можно подчеркнуть текст:
- Подчеркнуть текст пунктиром CSS:
<!DOCTYPE html> <html> <head> <title>Подчеркнутый пунктиром текст - "Нубекс"</title> <meta charset="utf-8"> <style> .
- Подчеркивание точками:
<!DOCTYPE html> <html> <head> <title>Подчеркнутый точками текст - "Нубекс"</title> <meta charset="utf-8"> <style> .dotted { border-bottom: 2px dotted blue; } </style> </head> <body> <p>Конструктор сайтов <span>Нубекс"</span></p> </body> </html> - Двойная черта:
<!DOCTYPE html> <html> <head> <title>Подчеркнутый двумя линиями текст - "Нубекс"</title> <meta charset="utf-8"> <style> . double {
border-bottom: double blue;
}
</style>
</head>
<body>
<p>Конструктор сайтов <span>Нубекс"</span></p>
</body>
</html>
double {
border-bottom: double blue;
}
</style>
</head>
<body>
<p>Конструктор сайтов <span>Нубекс"</span></p>
</body>
</html>Как видно из приведенных примеров, управлять стилем подчеркивания можно при помощи свойства border-bottom (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.
Смотрите также:
CSS свойство text-underline-position
Свойство text-underline-position устанавливает положение линии подчеркивания элемента при помощи свойства text-decoration со значением «underline».
Свойство text-underline-position только частично поддерживается браузерами Chrome .
Для максимальной совместимости браузера могут быть использованы такие расширения, как -webkit- для Safari, Google Chrome и Opera (новые версии).
| Значение по умолчанию | auto |
| Применяется | Ко всем элементам. |
| Наследуется | Да |
| Анимируемое | Нет |
| Версия | CSS3 |
| DOM синтаксис | object.style.textunderlinePosition = «under»; |
Синтаксис¶
text-underline-position: auto | under | left | right | above | below | auto-pos | initial | inherit;Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p {
text-decoration: underline;
-webkit-text-underline-position: auto;
-ms-text-underline-position: auto;
text-underline-position: auto;
}
</style>
</head>
<body>
<h3>Пример свойства text-underline-position</h3>
<p>Lorem Ipsum - это текст-"рыба". ..</p>
</body>
</html>
Рассмотрим другой пример со значением «under»:
Пример¶
Попробуйте сами!<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> <style> p { text-decoration: underline; -webkit-text-underline-position: under; -ms-text-underline-position: under; text-underline-position: under; text-decoration-color: #1c87c9; font-size: 25px; } </style> </head> <body> <h3>Пример свойства text-underline-position</h3> <p>Lorem Ipsum - это текст-"рыба"...</p> </body> </html>
Значения¶
| Значение | Описание |
|---|---|
| auto | Браузер использует свой собственный алгоритм размещения линии. |
| under | Линия расположена под текстовым контентом элемента. |
| left | Элемент расположен слева от текста в вертикальном режиме письма. |
| right | Элемент расположен справа от текста в вертикальном режиме письма. |
| above | Линия расположена над текстом. |
| below | Линия расположена под текстом. |
| auto-pos | Работает также, как значение auto. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Underline HTML string. Underline in HTML: Methods. Text-Decoration-Skip
Consider all the ways to make an underlined text via HTML and CSS. In total, there are three options:
- Through HTML tag and
- Through cSS property Text-Decoration.
- Through the CSS Border-Bottom property
Underlined text via html tag
andAll text prisoners in tags and becomes emphasized.
Name It came from the English word «Underline». HTML Tag It is considered newer.
for example
Normal text.
Normal text. Underlined text through tag ins
Converted to the page in
Normal text. Underlined text through the tag u
Normal text.
Stressed text through the CSS Text-Decoration property
CSS has a Text-Decoration property that is responsible for the formatting of the HTML text to create an underscore.
CSS Text Decoration Syntax
text-Decoration: none | Underline | Overline | Line-Through | Inherit;
- none — text without registration
- underline — Lower underscore
- overline — upper underscore
- line-Through — Thring text
- blink — shimmering text (it is recommended not to apply this value)
We are interested in the value of Underline
For example:
Текст со свойством text-decoration: underline
Преобразуется на странице в
Текст со свойством text-decoration: underline
Подчеркнутый текст через свойство CSS border-bottom
Свойство CSS border-bottom
создано для создании рамок (границ) объекта снизу.
Естественно таким образом можно задавать и подчеркивание тексту.
Рассмотрим пример
Преобразуется на странице в
Текст со свойством border-bottom (красное подчеркивание)Текст со свойством border-bottom (пунктирное подчеркивание)
Задача
Решение
Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без её перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.
Для создания линии следует использовать свойство border-bottom
со значением dashed
, добавляя его к селектору A
. Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot
. Также необходимо убрать исходное подчёркивание у ссылок с помощью свойства text-decoration
со значением none
(пример 1).
Пример 1. Пунктирное подчеркивание
HTML5 CSS 2.1 IE Cr Op Sa Fx
Пунктирное подчеркиваниеThe result of the example is shown in Fig. one.
The thickness of the line and the color of the underscore is also set through the Border-Bottom property.
Surely you noticed on many resources an animated underscore and wanted to find out how to make it possible on your website. To make beautiful cSS underscore Elements we will not need large knowledge, or connecting additional scripts, all that we need is standard HTML and CSS.
Variations underline
Underline links or any other elements, you can come up with any. Underlining can emerge from below, leave to the left or right, etc. We will look more over interesting example, in which the underscore will be touched from the center to the edges, as on the demonstration below.
demonstration of underscore
HTML.
To begin with, creating any element, for example, take tag a. The attribute is not important to us, because most of the work will be set up with styles.
CSS.
Implementation will be in two lines that will be touched from the middle of the bottom of the element to its edges.
For the underscore, we are responsible for the Text-Decoration property, but it does not make sense here, because it is not entirely relevant to embody our animation plans in this case. We will not forget that each element can be assigned a pseudo-element :: Before or :: Afterter. Therefore, all properties will be asked to them, and our reference immediately set the following parameters:
A (display: inline-block; position: relative; text-decoration: none;)
Thus, we set block streaming and positioning relative to the source location. All this is done so that the underscore does not get out of the element when we pseudo-element :: Before appoint absolute positioning. After that, we need to set its clear location and size. And here we immediately create the first half of the underscore.
A :: Before: Absolute; CONTENT: «»; Height: 2px; width: 0; background-color: red; transition: width .
5s Ease-in-Out, Left .5s Ease-In- Out; Left: 50%; Bottom: 0;)
Those. The height of the underscore line will be 2px, length 0, red, and the TRANSITION property is responsible for the animation. And of course, the indent to the left is 50%, i.e. Central point. Almost the same actions and pseudo-element :: After:
A :: After (Display: Block; Position: absolute; content: «»; Height: 2px; width: 0; background-color: red; transition: width .5s Ease-in-Out; Left: 50%; bottom: 0;)
A: Hover :: Before (Width: 50%; Left: 0;) A: Hover :: Afterter (Width: 50%;)
It is worth noting that this is just one of the ways to implement this idea. You can do the same with only one pseudo-element :: Before. Subscribe to materials and suggest the topics for articles.
Underscore for block elements like tag
To create a line under the text, add the Border-Bottom style property to the element, its value is simultaneously the thickness of the line, its style and color (Example 1).
Example 1. Line on the whole width
HTML5 CSS 2.1 IE CR OP SA FX
Line under the headingThe distance from the line to the text can be adjusted by the Padding-Bottom property by adding it to the h2 selector. Result this example shown in fig. one.
Text underscore
To emphasize only the text, you must use the Text-Decoration property with the Underline value, again adding it to the h2 selector (Example 2).
Example 2. Line on the width of the text
HTML5 CSS 2.1 IE CR OP SA FX
Underlining headerThe black header attracts attention, despite the fact that it is black, not white.
The result of this example is shown in Fig. 2.
In the case of using the Text-Decoration property, the line is rigidly tied to the text, so it will not be possible to determine its position and style.
or learn tags formatting HTML text
One of the key and easiest tutorial lessons is presented to your attention.
- HTML text It is the main component of most Internet pages.
- By key phrases in the text of the HTML pages Users can find your site.
- HTML text May be any size and color, at your discretion. You can also determine the type of font and its volume.
- HTML Size Font It is commonly installed in pixels.
- HTML formatting Text Widespread, formatting tags are applied.
See below tags formatting HTML text:
- Tags → fat HTML text (bold font).
- Tags → Fat HTML text (bold font).
- Tags → Monoshyry HTML text (monosular font).
- Tags
- Tags → Monoshyry HTML text (monosular font).
- Tags → HTML text, size is more than usual (large font).
- Tags → HTML textThe size is less than the usual (small font).
- Tags → inclined HTML text (inclined font).
- Tags → inclined HTML text (inclined font).
- Tags → inclined HTML text (inclined font).
- Tags → Stressed HTML text (underlined font).
- Tags
- Tags → HTML text (font) in the lower index.
- Tags → HTML text (Font) in the upper index.
HTML text formatting: crushed, underlined text
Result: … Monoshyry font
Result: … font size is more than usual
Result: … inclined font
Result: Stressed text (stressed font)
Result: Upper index
C formatting, presented above, should be applied only for small sections of text. Use CSS. If you want to set a specific font for the whole page, or for several lines, for example.
HTML тег u
Пример
Отметьте слово с ошибкой тегом :
Это неверный текст.
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Тег представляет некоторый текст, который
не артикулирован и оформлен по-разному
из обычного текста, например слов с ошибками или собственных имен в китайском тексте.В
содержимое внутри обычно отображается с подчеркиванием. Вы можете изменить это
с помощью CSS (см. пример ниже).
Совет: Избегайте использования элемент, где его можно было спутать с гиперссылкой!
Поддержка браузера
| Элемент | |||||
|---|---|---|---|---|---|
| Есть | Есть | Есть | Есть | Есть |
Глобальные атрибуты
Тег также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег также поддерживает атрибуты событий в HTML.
Другие примеры
Пример
Используйте CSS для стилизации текста с ошибками:
. Ошибка орфографии {
текст-украшение-строка: подчеркивание;
стиль оформления текста: волнистый;
цвет оформления текста: красный;
}
Это какой-то неверный текст.