Тег u отмечает фрагмент, на котором есть пометка без слов, например слово с ошибкой в написании. Название - от английского underline, «подчёркнутый». Тег парный, закрывающий обязателен, собственных атрибутов нет, только глобальные. Он входит в стандарт и не устарел, а по умолчанию браузер выводит его с подчёркиванием.
<p>Потом <u>пошол</u> домой.</p>В этой статье
Что делает тег u в HTML
Стандарт HTML называет два случая: слово с ошибкой в написании и имена собственные в китайском тексте, где их принято подчёркивать. Справочник MDN перечисляет то же. В русском тексте на практике встречается первый случай, его и разберём.
Пример: найдите ошибки в тексте
Нажимайте на слова: отмеченное слово получает красную волнистую линию, вокруг него показываются теги u. Внизу написано, сколько ошибок найдено из трёх, что пропущено и какие отметки лишние.
Красную волнистую линию в примере задаёт стиль, так делают многие программы для проверки текста. Сам тег даёт обычную прямую линию, а как её изменить, показано в разделе ниже. Важно другое: u тут сообщает «на этом слове пометка», а причину пометки объясняет окружающий текст.
Тег u, ins или CSS: как выбрать
Подчёркивание нужно по разным причинам, и тег выбирают по причине, а не по виду.
- Нужно просто пометить слово, без объяснения причины - используют
u. - Текст добавлен при правке -
ins. - Слово ведёт на другую страницу -
a. - Подчёркивание нужно только для вида - класс и CSS.
- Важность передаёт
strong, подчёркивание для этого не годится.
<p>Слово <u>пошол</u> написано с ошибкой.</p>
<p>Добавлено: <ins>новый абзац</ins>.</p>
<p>Читайте <a href="/spravochnik">справочник</a>.</p>
<p>Заголовок с <span class="line">линией</span>.</p>| Признак | u | ins | a | Класс и CSS |
|---|---|---|---|---|
| Что сообщает | Пометка на слове | Текст добавлен | Переход на другую страницу | Ничего, только вид |
| Вид по умолчанию | Прямая линия под текстом | Прямая линия под текстом | Прямая линия под текстом, цвет ссылки | Как задано в CSS |
| Роль в структуре доступности (Chromium 141) | Отдельной роли нет | insertion | link | Отдельной роли нет |
Из таблицы видно главную сложность: у u, ins и ссылки вид одинаковый. Читатель привык считать подчёркнутое слово ссылкой, и это легко проверить на примере ниже.
Пример: ссылка или пометка
Оба слова подчёркнуты одинаково. Нажатие на каждое показывает, что перед вами. Кнопка меняет вид u на красную волнистую линию, и разница между ссылкой и пометкой становится видна сразу.
Поэтому подчёркнутый вид у пометки лучше менять: волнистая линия или другой цвет читаются как пометка, а не как ссылка.
Как выглядит u и как изменить стиль
Вид подчёркивания задаёт свойство text-decoration. По умолчанию у u в нём прописана прямая линия цветом текста. Мы проверили в Chromium 141: в красном тексте линия красная, вложенные u дают одну линию, а u внутри ссылки двойной линии не даёт.
u {
text-decoration: underline wavy #b3261e;
text-underline-offset: 3px;
}В первой строке правила три значения. Слово underline означает «линия под текстом», wavy - «волнистая», а #b3261e - цвет линии. Свойство text-underline-offset задаёт отступ линии от текста: чем больше число, тем ниже линия. Если убрать подчёркивание совсем (text-decoration: none), тег останется, но пометку на экране видно не будет.
Атрибуты тега u и правила записи
Собственных атрибутов у u нет, работают только глобальные: class, id, title, lang, style и остальные. Тег парный: закрывающий </u> обязателен. Внутри допустимы только текст и другие строчные теги, блочные вроде p или div вкладывать нельзя.
<p>Слово <u class="error">пошол</u> написано с ошибкой.</p>
<u><p>Так нельзя: абзац внутри u.</p></u>Устарел ли тег u
Нет. В HTML 4 тег считался устаревшим оформлением, и вместо него рекомендовали CSS. В HTML5 ему дали новое значение - пометка без слов, поэтому сейчас он допустим. Справочник MDN при этом советует брать его только для таких пометок.
Читают ли u программы чтения с экрана
В Chromium 141 у элемента u нет отдельной роли в структуре доступности. Как программы чтения с экрана произносят текст внутри u, мы не проверяли.
Значит, пометка одной линией доходит не до каждого читателя. Если слово с ошибкой важно найти, укажите это словами: «в слове пошол пропущена буква ё».
Частые ошибки
Большинство ошибок с этим тегом сводится к одной привычке: подчёркивать «чтобы заметили».
| Ошибка | Что происходит | Как исправить |
|---|---|---|
u для важного текста | Линия не передаёт важность, а читатель принимает её за ссылку | Использовать strong |
| Подчёркнутый текст, который не ссылка | Читатель нажимает, и ничего не происходит | Убрать подчёркивание или сделать волнистым и цветным |
u для названия книги или фильма | Для названий произведений в стандарте есть отдельный тег | Использовать cite |
u для добавленного при правке текста | Смысл «добавлено» теряется | Использовать ins |
u ради декоративной линии | Тег обещает пометку, а там просто оформление | Класс и text-decoration |
