Тег <u>
Описание
Тег <u> (underline) добавляет подчёркивание к тексту. В HTML5 получил новое семантическое значение - выделение текста, который должен стилистически отличаться от обычного (например, опечатки, имена собственные в китайском языке).
<p>Это <u>подчёркнутый текст</u> в предложении.</p>
Ключевые особенности:
- В HTML4 - чисто презентационный элемент (подчёркивание)
- В HTML5 - семантическое значение "стилистически отличающийся текст"
- По умолчанию отображается с подчёркиванием
- Может содержать другие inline-элементы
- Не рекомендуется для гиперссылок (чтобы не путать с линками)
<!-- Обозначение опечатки -->
<p>В слове <u>привет</u> допущена ошибка.</p>
<!-- Китайские имена собственные -->
<p>Китайское имя: <u>张三</u> (Zhang San)</p>
<!-- Стилистическое выделение -->
<p>Эта фраза требует <u>особого внимания</u>.</p>
<!-- Не рекомендуется (может путать с ссылкой) -->
<p>Нажмите <u>здесь</u> чтобы продолжить.</p>
Стилизация через CSS:
<style>
u {
text-decoration: underline;
text-decoration-style: wavy; /* Волнистая линия */
text-decoration-color: red;
text-underline-offset: 3px;
}
.spelling-error {
text-decoration: underline dotted red;
}
/* Для китайских имен */
.chinese-name {
text-decoration: underline;
text-decoration-color: blue;
}
</style>
<p>Ошибка: <u class="spelling-error">правописание</u></p>
<p>Имя: <u class="chinese-name">李四</u> (Li Si)</p>
Рекомендации по использованию:
- Используйте для семантического выделения, а не просто подчёркивания
- Избегайте в местах, где можно спутать с гиперссылкой
- Для подчёркивания не-семантического текста применяйте CSS
- В формах лучше использовать
<mark>для выделения - Для опечаток сочетайте с классом (например,
spelling-error)
<p>
<u>Семантическое выделение</u> |
<span style="text-decoration:underline">Декоративное подчёркивание</span> |
<a href="#">Гиперссылка</a> |
<mark>Выделение маркером</mark>
</p>
Тег <u> в HTML5 следует использовать осознанно для семантического выделения текста, а не как простой способ добавить подчёркивание, для чего лучше подходят CSS-стили.
Атрибуты
| accesskey | Горячая клавиша для активации |
| class | CSS-классы для стилизации |
| contenteditable | Разрешает редактирование |
| data-* | Пользовательские данные |
| dir | Направление текста |
| hidden | Скрывает элемент |
| id | Уникальный идентификатор |
| lang | Язык содержимого |
| style | Инлайновые стили |
| tabindex | Порядок перехода |
| title | Всплывающая подсказка |
| translate | Определяет возможность перевода |
| align | Горизонтальное выравнивание |
| color | Цвет текста |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 2.0 | 1.0 | 1.0 | 1.0 | 1.0 |