HTML тег u - Изучение HTML

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

Стоит развеять распространённое заблуждение: в HTML5 тег  не устарел и не означает просто «подчеркнуть это». Он был переосмыслен и лишился своей прежней, чисто презентационной семантики HTML 4. Если вам нужно только подчёркивание для стилистических целей — это задача для CSS, а не для .

Спецификация HTML определяет два типичных варианта использования:

Выделение слова с орфографической ошибкой — так же, как проверка орфографии рисует волнистую линию под ним.
Обозначение имени собственного в китайском тексте (знак собственного имени — типографическое соглашение в китайской письменности).

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

Внимание

Подчёркнутый текст без ссылки легко спутать с гиперссылкой. Большинство пользователей воспринимают подчёркивание как «это кликабельно». Используйте  только тогда, когда действительно имеете в виду нетекстовую аннотацию, и рассмотрите возможность изменить его стиль (например, сделать подчёркивание пунктирным или волнистым), чтобы оно не выглядело как ссылка. Никогда не подчёркивайте текст просто для акцента — для этого используйте  или . Для чисто декоративного подчёркивания используйте свойство CSS text-decoration.

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

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

Если нужно добавить текстовую аннотацию (например, руководство по произношению), используйте тег <ruby>.

Синтаксис

Элемент  используется парно. Аннотируемый контент располагается между открывающим () и закрывающим () тегами.

Пример: выделение слова с орфографической ошибкой

Распространённый способ использования в соответствии со спецификацией — пометить орфографическую ошибку. С помощью class можно переопределить стандартное подчёркивание как волнистую красную линию — так, как редакторы отображают опечатки:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .spelling-error {
        text-decoration: red wavy underline;
      }
    </style>
  </head>
  <body>
    <p>The word <u class="spelling-error">teh</u> is misspelled.</p>
  </body>
</html>

Result

Пример: аннотация имени собственного в китайском тексте

Другой типичный вариант использования — знак собственного имени в китайском языке, где  обозначает слово как имя собственное:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <p><u>李白</u>是著名的诗人。</p>
  </body>
</html>

Result

Пример: отображение по умолчанию

По умолчанию браузеры подчёркивают содержимое элемента :

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <p>Here we used <u>the &lt;u&gt; element</u>.</p>
  </body>
</html>

Попробуйте сами »

Пример использования свойства CSS text-decoration:

Если нужно только подчёркивание для визуального оформления, используйте CSS вместо :

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document.</title>
    <style>
      span {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <p>Here we used <span> CSS property text-decoration:underline</span>.</p>
  </body>
</html>

Попробуйте сами »

Атрибуты

Тег  поддерживает все глобальные атрибуты и атрибуты событий.

Практика

Что представляет тег HTML u в HTML5?

Фрагмент текста с невыраженной, нетекстовой аннотацией, например опечаткой.Текст, который должен быть просто подчёркнут в целях визуального оформления.Текст большой важности.Выделенный текст, изменяющий смысл предложения.Устаревший элемент, который браузеры больше не поддерживают.