: Элемент аннотации (подчёркивание)

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

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

Этот элемент содержит только глобальные атрибуты.

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

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

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

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

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

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

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

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

Результат

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

В большинстве случаев вам не нужно использовать <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.