Клавиша / esc

<u>

Выделяет стилистически отличающийся текст.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Как пишется

Скопировано
        
          
          <p>  В человеке должно быть всё  прекрасно: и <u>лецо</u>,  и одежда, и душа, и мысли.</p>
          <p>
  В человеке должно быть всё
  прекрасно: и <u>лецо</u>,
  и одежда, и душа, и мысли.
</p>

        
        
          
        
      
Открыть демо в новой вкладке

Как понять

Скопировано

По умолчанию браузеры добавляют тексту в <u> подчёркивание с помощью text-decoration: underline.

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

  • Если мы хотим подчеркнуть важность или выделить текст. Для этого предназначены <strong>, <em>, <mark> или <cite>.
  • Если мы хотим просто добавить тексту нижнее подчёркивание в оформительских целях. Для этого достаточно задать блоку с текстом text-decoration: underline.

Из-за дефолтных стилей подчёркнутый при помощи <u> текст можно спутать со ссылкой: текст внутри <a> по умолчанию тоже подчёркивается, поэтому мы привыкли воспринимать подчёркнутый текст как ссылку. Чтобы не было путаницы, лучше оформить подчёркивание у <u> иначе.

Пример

Скопировано

Для текста, содержащего ошибки, можно добавить подчёркивание волнистой линией. Тогда ошибки будут сразу бросаться в глаза, и их не получится спутать со ссылками.

        
          
          u {  text-decoration-style: wavy;  text-decoration-color: #FFFFFF;}
          u {
  text-decoration-style: wavy;
  text-decoration-color: #FFFFFF;
}

        
        
          
        
      
        
          
          <p>  В <u>чилавеке</u> должно быть всё  <u>прикрасна</u>: и <u>лецо</u>,  и одежда, и душа, и мысли.</p>
          <p>
  В <u>чилавеке</u> должно быть всё
  <u>прикрасна</u>: и <u>лецо</u>,
  и одежда, и душа, и мысли.
</p>

        
        
          
        
      
Открыть демо в новой вкладке