HTML-тег <u>

HTML-тег <u> используется для подчёркивания текста на веб-странице. Хотя в старых версиях HTML он в основном использовался для подчёркивания, его современное применение носит более семантический характер. В настоящее время тег <u> используется для обозначения текста с нетекстовыми аннотациями, такими как слова с ошибками, имена собственные на китайском языке или термины с особым акцентом.

Для чисто визуального оформления рекомендуется использовать CSS вместо тега <u> . Однако тег <u> остаётся полезным для семантического подчёркивания, когда подразумевается определённый смысл.

Базовый синтаксис HTML-тега <u>

Базовая структура тега <u> : 

<u>Underlined text</u>
Пример тега HTML u

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

Пример использования тега <u>

Вот пример подчеркнутого текста с использованием тега <u> : 

<!DOCTYPE html>
<html>
    <body>
        <p>This is an example of <u>underlined text</u> using the <u> tag.</p>
    </body>
</html>
Пример использования тега u

Пояснение: Текст «подчеркнутый текст» отображается с подчеркиванием.

Стилизация подчеркнутого текста с помощью CSS

Вместо того чтобы полагаться на тег <u> для стилизации, вы можете использовать CSS для подчеркивания текста: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .underline {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <p>This text is <span class="underline">underlined with CSS</span>.</p>
    </body>
</html>
Стилизация подчеркнутого текста с помощью CSS

Результат: текст, «подчеркнутый с помощью CSS», подчеркнут с помощью свойства text-decoration в CSS.

Семантическое использование тега <u>

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

<!DOCTYPE html>
<html>
    <body>
        <p>This word is <u>mispelled</u> to indicate a spelling error.</p>
    </body>
</html>
Семантическое использование тега u

Пояснение: Тег <u> выделяет слово «mispelled», чтобы указать, что оно намеренно отмечено как орфографическая ошибка.

Вопросы доступности

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

Практическое применение тега <u>

  • Выделение орфографических ошибок: отметьте слова, чтобы указать на орфографические ошибки или исправления.
  • Нетекстовые аннотации: используйте подчеркивание для выделения имен собственных или специальных терминов в определенных контекстах.
  • Выделение важного текста: когда подчеркивание несет семантическое значение(например, выделение ключевых терминов или аннотаций).