Подчеркнутый текст тег html – Свойство text-decoration, подчёркивание и другие эффекты — Оформление текста — HTML Academy

| Справочник HTML



Элемент <u> (от англ. "underline" ‒ «подчёркивание») содержит в себе текст, который должен стилистически отличаться от обычного текста, например, слова с орфографическими ошибками или текст на другом языке. В некоторых случаях подчеркивание имеет смысловое значение, например, подчеркивание собственных имён в китайском языке, или указание неправильно написанного слова при проверке орфографии.

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

Внимание: Этот тег был устаревшим в HTML 4 и XHTML 1, но затем вновь введен в HTML5 с другой семантикой. Если вы хотите подчеркнуть текст несемантическим образом, используйте соответствующие стили CSS.

Синтаксис

<u>Текст</u>

Закрывающий тег

Обязателен.

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <u> со следующими значениями CSS по умолчанию:

u {
    text-decoration: underline;
}

Различия между HTML 4.01 и HTML5

В HTML 4.01 тег <u> считается устаревшим (определяет подчеркнутый текст).
В спецификацию HTML5 он был опять добавлен, но теперь тег <u> предназначен для определения текста, который должен стилистически отличаться от обычного текста, например, для определения слов с ошибками или собственные имена на китайском языке.

Пример использования:

Пример HTML:

Попробуй сам
<u>Специальный репортаж </u>: Телеканал «Звезда»<br>
<span>Специальный репортаж</span>: Телеканал «Звезда»

Спецификации

Поддержка браузерами

Элемент
<u> 3+ 1+ 4+ 1+ 1+ 1+
Элемент
<u> 1+ 1+ 6+ 1+

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

Как сделать текст жирным и привлечь к нему внимание:
Важный и жирный текст

Как сделать акцент на фрагменте текста:
Акцент и курсив

Как отобразить текст в нижнем или верхнем индексе:
Форматирование текста


Учебник HTML

HTML уроки: HTML Форматирование

HTML Элементы



Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 3.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <strike> отображает текст как перечеркнутый. Этот тег аналогичен тегу <s>, который имеет сокращенную форму записи подобно тегам <b>, <i> и <u>. В любом случае, теги <strike> и <s> осуждаются спецификацией HTML, взамен них рекомендуется использовать стили.

Синтаксис

<strike>Текст</strike>

Закрывающий тег

Обязателен.

Атрибуты

Нет.

Аналог CSS

text-decoration

Валидация

Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>. В HTML5 использование <strike> запрещено.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег STRIKE</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>

  <p><b>Список должников</b></p>
  <p><strike>Чебурашка</strike><br>
   <strike>Крокодил Гена</strike><br>
     Шапокляк</p>

 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Вид текста, оформленного с помощью тега <strike>

Как сделать зачеркнутый текст в html

Приветствую вас, дорогой читатель, случайно или умышленно зашедший на мой блог!

В данной статье я покажу несколько способов как сделать в html зачёркнутый текст.

Навигация по статье:

Выглядеть он будет вот так: зачеркнутый текст в html

Для чего это может понадобится?

  • Такой текст можно использовать для задания акционных цен, когда старая зачёркнута, а новая нет.
  • Для общения на форумах и в сосетях. Я не очень понимаю зачем, но люди часто используют этот приём =)
  • Для размещения текстов на сайте.

Для создания такого зачёркнутого текста можно воспользоваться одним из специальных тегов.

Обучение фотошоп

Использование тегов stike и s для зачёркивания текста

Тег strike

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

Сам код для зачёркнутого текста будет выглядеть так:

<strike>html тег для зачеркнутого текста</strike>

<strike>html тег для зачеркнутого текста</strike>

Вот что получится в итоге:

html тег для зачеркнутого текста

Тег s

Тот же тег stike, но в сокращённом виде.
html код зачеркнутого текста будет выглядеть так:

<s>html тег для зачеркнутого текста</s>

<s>html тег для зачеркнутого текста</s>

Результат этого кода выглядит так:

html тег для зачеркнутого текста

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

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

Использование html тега del для зачёркнутого текса

Вообще данный тег изначально был предназначен для пометки удалённого текста в новой версии документа.

Если честно, то я ещё не сталкивалась с необходимостью помечать какой-то текст как удалённый, поэтому на практике его чаще всего используют просто для зачёркивания текста.

Для того чтобы сделать зачёркнутый текст при помощи html можно воспользоваться следующим кодом:

<del>html тег для зачеркнутого текста</del>

<del>html тег для зачеркнутого текста</del>

Результат его использования будет выглядеть так:

html тег для зачеркнутого текста

Как видите полученный результат ничем не отличается от того что мы получили при использовании тегов

strike и s.
Использование тега del более предпочтительно для использования при вёрстке сайтов.

Как сделать зачеркнутый текст на css?

Самым оптимальным вариантом для создание зачёркнутого текста на html странице будет использование CSS. Правда этот способ немного дольше и длиннее, поэтому его применение не всегда оправдано.

Для создания зачёркнутого текста в CSS существует специальное CSS свойство text-decoration со значением line-through
Для того чтобы сделать зачёркнутый текст нужно его заключить в тег span или любой другой и присвоить этому тегу определённый класс, а затем в CSS для этого класса указать свойство text-decoration:line-through;

html код зачёркнутого текста будет выглядеть так:

<span class=”strike-text”>html тег для зачеркнутого текста</span>

<span class=”strike-text”>html тег для зачеркнутого текста</span>

А вот CSS код:

.strike-text { text-decoration:line-through; }

.strike-text {

text-decoration:line-through;

}

Также можно задать это CSS свойство в самом теге при помощи атрибута style:

<span style=”text-decoration:line-through;”>html тег для зачеркнутого текста</span>

<span style=”text-decoration:line-through;”>html тег для зачеркнутого текста</span>

Правда этот вариант тоже не всегда приветствуется. Но в любом случае выбирать вам!

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

Как научиться продвигать сайты?

На этом у меня всё. Подписывайтесь на обновления блога и заходите на мой канал YouTube. Там много полезных видео уроков.
Желаю вам хорошего настроения и до встречи в следующих статьях!

С уважением Юлия Гусарь

Изучаем курсивный, жирный, подчеркнутый и зачеркнутый текст