Чем отличается от ?

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

Исполняемые доки HTML: Подчеркивание

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

Оберните его в или задайте text-decoration: underline в CSS. Используйте только в его особом значении (например, для отметки слова с ошибкой); для чисто визуального подчеркивания задайте CSS или самому элементу.

Q: Как зачеркнуть текст в HTML?

Используйте для текста, который больше не актуален, например старой цены, и для текста, удаленного при правке. Оба тега проводят линию через текст. В CSS то же самое визуально делает text-decoration: line-through.

Q: Тег устарел?

Нет. объявили устаревшим в HTML 4, но в HTML5 он вернулся с новым значением: текст с нетекстовой пометкой, например орфографическая ошибка или имя собственное в китайском тексте. Он корректен, просто редко оказывается правильным выбором.

Подчеркнутый и зачеркнутый текст в HTML: u, ins, s и del

Подчеркнуть текст в HTML можно через или CSS text-decoration, а зачеркнуть через <s> или <del>. Разберем, что означает каждый тег, как <ins> и <del> отмечают правки и почему подчеркнутый текст, который не является ссылкой, сбивает читателей с толку.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

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

Есть два способа: тег  или CSS-свойство text-decoration: underline. Оба рисуют одинаковую линию:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

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

Что означает тег u

 это не универсальная кнопка «подчеркнуть». В современном HTML он означает текст с невысказанной пометкой: знак, который говорит «здесь что-то особенное», не объясняя, что именно. Типичные реальные применения:

отметка орфографической ошибки (как в текстовом редакторе, часто красной волнистой линией),
отметка имен собственных в китайском тексте, где это типографская традиция.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

Для выделения используйте  или  (см. жирный текст), а для названий книг <cite>. Если нужен только внешний вид, используйте CSS.

Зачеркнутый текст: s и del

В HTML два тега проводят линию через текст, и значат они разное:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

Тег	Смысл	Типичное применение
`<s>`	Больше не актуально, сохранено для контекста	Старая цена, распроданный тип билета
`<del>`	Удалено из документа	Правки, журналы изменений, выполненные пункты списка дел

Отметка правок через ins и del

<ins> это пара для <del>: он отмечает добавленный текст. Браузеры по умолчанию его подчеркивают. Оба тега принимают datetime (когда произошло изменение) и cite (URL с объяснением):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

Красно-зеленый стиль это привычный вид diff. text-decoration: none у ins убирает подчеркивание по умолчанию, чтобы он не выглядел как ссылка.

Подчеркивание и зачеркивание через CSS

text-decoration отвечает за внешний вид у любого элемента: он принимает цвет и стиль, а text-decoration-thickness задает толщину. Для чисто декоративных линий это правильный инструмент:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

Как убрать подчеркивание у ссылок, как задать смещение подчеркивания и остальные детали text-decoration описаны на странице подчеркивание в CSS.

Доступность

Программы чтения с экрана поддерживают <s>, <del> и <ins> непоследовательно: одни объявляют их как удаленный или вставленный текст, многие читают как обычный, поэтому слушатель может услышать «Цена 49 долларов 29 долларов» без намека на то, какая из них актуальна. Когда разница важна, скажите о ней и словами, например текстом, который визуально скрыт, но зачитывается, или просто «Было 49 $, стало 29$ ».

Частые ошибки

Подчеркнутый текст, который не является ссылкой. Читатели попытаются по нему кликнуть. Для выделения используйте жирный шрифт, цвет или фон.
 для выделения. Используйте  или .
<strike>. Он устарел. Используйте <s>, <del> или text-decoration: line-through.
<s> для удаленного содержимого в истории документа. Для этого есть <del>, который еще и может хранить время изменения.
Смысл передается только линией. Многие программы чтения с экрана ее не объявляют.

Часто задаваемые вопросы

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

Оберните его в  или задайте text-decoration: underline в CSS. Используйте  только в его особом значении (например, для отметки слова с ошибкой); для чисто визуального подчеркивания задайте CSS  или самому элементу.

Как зачеркнуть текст в HTML?

Используйте <s> для текста, который больше не актуален, например старой цены, и <del> для текста, удаленного при правке. Оба тега проводят линию через текст. В CSS то же самое визуально делает text-decoration: line-through.

Тег устарел?

Нет.  объявили устаревшим в HTML 4, но в HTML5 он вернулся с новым значением: текст с нетекстовой пометкой, например орфографическая ошибка или имя собственное в китайском тексте. Он корректен, просто редко оказывается правильным выбором.

Что стало с тегом <strike>?

<strike> устарел. Браузеры по-прежнему рисуют его как зачеркивание, но это некорректный HTML. Используйте <s> или <del> в зависимости от смысла, или text-decoration: line-through.

Чем <s> отличается от <del>?

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

Связанные концепции