<u> HTML-элемент для нетекстовой аннотации (подчёркивания)

Элемент <u> HTML представляет собой фрагмент строчного текста, который должен отображаться так, чтобы указывать на наличие у него нетекстовой аннотации. По умолчанию он отображается как сплошное подчёркивание, но его оформление можно изменить с помощью CSS.

Попробуйте

<p>
  You could use this element to highlight <u>speling</u> mistakes, so the writer
  can <u>corect</u> them.
</p>

p {
  margin: 0;
}

u {
  text-decoration: red wavy underline;
}

Дополнительные сведения о том, когда уместно использовать <u>, а когда нет, см. в разделе Примечания по использованию.

Атрибуты

Этот элемент включает только глобальные атрибуты.

Примечания по использованию

Как и другие элементы, предназначенные исключительно для стилизации, исходный HTML-элемент Underline (<u>) был признан устаревшим в HTML 4; однако в HTML 5 элемент <u> был восстановлен с новым семантическим значением: отмечать текст как имеющий ту или иную форму нетекстовой аннотации.

Варианты использования

Допустимые варианты использования элемента <u> включают обозначение орфографических ошибок, применение знака собственного имени для обозначения собственных имён в китайском тексте и другие формы аннотации.

Не следует использовать <u> для подчёркивания текста в целях оформления или для обозначения названий книг.

Другие элементы, которые стоит рассмотреть

В большинстве случаев следует использовать элемент, отличный от <u>, например:

• <em> для обозначения смыслового ударения
• <b> для привлечения внимания к тексту
• <mark> для выделения ключевых слов или фраз
• <strong> для обозначения особой важности текста
• <cite> для обозначения названий книг и других публикаций
• <i> для обозначения технических терминов, транслитераций, мыслей или названий судов в западных текстах

Для добавления текстовых аннотаций (в отличие от нетекстовых аннотаций, создаваемых с помощью <u>) используйте элемент <ruby>.

Чтобы придать тексту подчёркнутый вид без какого-либо семантического значения, используйте значение underline свойства text-decoration.

Примеры

Обозначение орфографической ошибки

В этом примере элемент <u> и CSS используются для отображения абзаца с орфографической ошибкой, выделенной красным волнистым подчёркиванием, которое довольно часто используется для этой цели.

HTML

<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>

В HTML используется элемент <u> с классом spelling, который обозначает ошибочное написание слова «wrongly».

CSS

u.spelling {
  text-decoration: red wavy underline;
}

Этот CSS указывает, что при применении класса spelling к элементу <u> под текстом должно появиться красное волнистое подчёркивание. Это распространённый способ оформления орфографических ошибок. Другой распространённый стиль можно задать с помощью red dashed underline.

Результат

Результат будет знаком всем, кто пользовался одним из популярных текстовых редакторов.

Не используйте <u>

В большинстве случаев элемент <u> вам на самом деле не нужен. Вот несколько примеров того, что следует использовать вместо него в разных случаях.

Подчёркивание без семантического значения

Чтобы подчеркнуть текст без какого-либо семантического значения, используйте элемент <span> со свойством text-decoration, установленным в значение "underline", как показано ниже.

HTML

<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots

CSS

.underline {
  text-decoration: underline;
}

Результат

Оформление названия книги

Названия книг следует оформлять с помощью элемента <cite>, а не <u> и даже не <i>.

Использование элемента cite

<p>The class read <cite>Moby-Dick</cite> in the first term.</p>

Стилизация элемента cite

По умолчанию текст элемента <cite> отображается курсивом. Это можно переопределить с помощью CSS:

<p>The class read <cite>Moby-Dick</cite> in the first term.</p>

cite {
  font-style: normal;
  text-decoration: underline;
}

Техническая сводка

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

Совместимость с браузерами

См. также

• Вместо него обычно следует использовать элементы <span>, <i>, <em>, <b> и <cite>.
• Для подчёркивания без семантического значения следует использовать свойство CSS text-decoration.