Как подчеркнуть текст в HTML

Устаревший метод подчеркивания в HTML заключается в использовании тегов <u></u>, но теперь используется современный метод на основе CSS. Подчеркивание считается плохим способом привлечь внимание к тексту, потому что подчеркнутый текст легко спутать со ссылкой.

Метод 1

Метод 1 из 2:

Современный метод

Загрузить PDF

1
Используйте свойство «text-decoration» в CSS. В настоящее время тег <u> не применяется для подчеркивания текста.
- Если добавить это свойство, вам не придется менять код в будущем, когда старые теги выйдут из обращения.
2
Используйте тег <span>, чтобы подчеркнуть определенный фрагмент текста. Введите открывающий тег вместе со свойством «text-decoration» перед текстом, который нужно подчеркнуть. В конце текста введите закрывающий тег </span>.^{[1]XИсточник информации}
```
<span style="text-decoration: underline;">Этот текст будет подчеркнут.</span>
```
3
Укажите HTML-элементы в разделе <style>, чтобы упростить подчеркивание. Также это можно сделать с помощью таблицы стилей CSS. Например, чтобы подчеркнуть все заголовки уровня 3, добавьте следующий код в раздел «style»:
```
<html><head><style>h3 {text-decoration: underline;}</style></head><body><h3>Этот заголовок будет подчеркнут</h3></body></html>
```
4
Создайте класс CSS, чтобы быстро подчеркивать текст. В таблице стилей или разделе <style> можно создать классы, чтобы вызвать их позже. Классу можно присвоить любое имя.
```
<html><head><style>.underline {text-decoration: underline;}</style></head><body>Используйте этот класс для <div class="underline">быстрого подчеркивания</div> различных<div class="underline">элементов</div></body></html>
```
5
Подумайте о других способах выделения текста. Рекомендуем избегать подчеркивания, чтобы не запутать пользователей. Лучше применить тег <em>, чтобы выделить текст курсивом. Используйте CSS, чтобы добавить к этому тегу другие параметры стиля.
```
<html><head><style>em {color: red;}</style></head><body>Все, что находится в элементе «em», будет выделено <em>курсивом (по умолчанию), а также окрашено в красный цвет</em> благодаря дополнительным параметрам стиля.</body></html>
```
Реклама

Метод 2

Метод 2 из 2:

Устаревший метод

Загрузить PDF

Они устарели — это означает, что эти теги все еще работают, но ими стараются не пользоваться или не рекомендуют применять. Это связано с тем, что HTML не предназначен для настройки стиля контента. Тег <u> все еще работает, но должен представлять текст, отличный от другого текста, например, слов с ошибками или китайских имен собственных.
2
Используйте теги <u></u>, чтобы подчеркивать элементы (только для демонстрации). Практически нет ни одного случая, когда необходимо использовать эти теги. Возможно, вам придется редактировать старый сайт, поэтому лучше быть в курсе, что представляют собой указанные теги.
```
<html><body>Старый HTML-тег <u> позволял быстро подчеркивать элементы </u>, но если затрагивались другие элементы стиля, все становилось хаотичным. Поэтому сейчас для подчеркивания используют CSS-элемент «text-decoration».</body></html>
```
Реклама

Советы

Практически всегда есть лучший способ выделить контент на веб-странице, чем подчеркивание. Подчеркивание может запутать пользователей. Подумайте о том, как выделить текст с помощью CSS.