Подчеркивание текста в HTML

0
105
views
verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

×

Перевод статьи «HTML Underline Text – How to Use the <u> Tag with Example Code».

Photo by Tyler B on Unsplash

В более ранних версиях HTML тег <u> использовался для подчеркивания текста. В этой статье мы рассмотрим его использование в HTML 5.

Что из себя представляет тег <u>?

Тег <u> обозначает Unarticulated Annotation element («элемент невнятной аннотации»). Этот элемент представляет собой текст, который стилистически отличается от окружающего текста, но содержащееся в нем примечание — не словесное.

Стиль по умолчанию для этого элемента — одинарное подчеркивание.

Давайте рассмотрим примеры использования тега <u>.

При помощи тега <u> можно выделять слова с ошибками

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

<p>I was sitting in <u>orcestra</u> practice and the conductor was mad because we <u>didt</u> practice our parts.</p>

Также этот тег можно использовать для подчеркивания имен собственных в китайском письме. Пример:

<p> This is an example of a proper name mark:<u>书名号</u></p>

Как изменять стиль тега <u> при помощи CSS

Если вы хотите выделить текст с ошибкой, вы можете стилизовать тег <u> и создать подчеркивание волнистой красной линией.

<p>This sentence has so <u class="spelling">mannny</u> spelling <u class="spelling">errrrors</u>.</p>
body {
  font-family: Verdana, sans-serif;
}
u.spelling {
  text-decoration: red wavy underline;
}

Избегайте использования тега <u> с целью стилизации

В более ранних версиях HTML тег <u> использовался просто для подчеркивания текста. В HTML5 он получил семантическое значение. Для простого подчеркивания следует пользоваться CSS-стилями.

<span class="underline">This text was styled with CSS.</span>
.underline {
  text-decoration: underline;
}

Не используйте тег <u> для выделения названий книг

Если вы ссылаетесь на название книги, следует пользоваться тегом <cite>. Стиль этого тега по умолчанию — курсивное начертание, но стили можно переписать при помощи CSS.

<p>I enjoyed reading <cite>The Great Gatsby</cite> in high school.</p>
cite {
  font-style: normal;
  text-decoration: underline;
}

Заключение

Тег <u> — это семантический элемент, которым следует пользоваться только в четко определенных случаях. Например, для выделения слов с ошибками. Менее распространенный случай использования этого тега — для подчеркивания имен собственных в китайском письме.

Никогда не используйте тег <u>, чтобы подчеркнуть текст просто «для красоты». Если ваше подчеркивание не несет семантической нагрузки, создавайте его при помощи правил CSS.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here