HTML тег <strike>
Устаревший тег HTML <strike> отображал зачёркнутый текст. Узнайте, почему его удалили и как заменить на <s>, <del> или CSS.
Тег <strike> раньше использовался для отображения текста с горизонтальной линией посередине (зачёркивание).
Элемент <strike> является устаревшим тегом HTML и не поддерживается в HTML5. Не используйте его в новых документах. Вместо него применяйте <del>, <s> или CSS.
На этой странице объясняется, что делал тег <strike>, почему его удалили и — что важнее всего — чем именно его заменить. Выбор между <del>, <s> и обычным CSS зависит от смысла зачёркивания, поэтому для каждой замены ниже приведён рабочий пример.
Почему тег <strike> был удалён
В HTML5 тег <strike> был исключён, потому что он описывал только то, как текст должен выглядеть, а не что он означает. Современный HTML разделяет смысл (разметка) и внешний вид (CSS). Линия через текст может означать разные вещи:
- Текст был удалён в процессе редактирования → используйте
<del>(часто в паре с<ins>для замены). - Текст больше не актуален, но сохранён для контекста → используйте
<s>. - Линия носит чисто визуальный характер без семантического смысла → используйте CSS-свойство
text-decoration: line-through.
Правильный выбор элемента также помогает вспомогательным технологиям и поисковым системам понять ваш контент — чего универсальный тег <strike> никогда не обеспечивал.
Как выглядел старый тег <strike>
Тег <strike> использовался парно: содержимое размещалось между открывающим (<strike>) и закрывающим (</strike>) тегами. Браузеры по-прежнему отображают его из соображений обратной совместимости, но писать новый код так не следует:
<!-- Obsolete — do not use in new documents -->
<p><strike>I am studying at the school.</strike></p>
<p>I am studying at the university.</p>
Переход с тега <strike>
Заменяйте каждый тег <strike> в зависимости от смысла зачёркнутого текста.
Вариант 1: <del> для удалённого содержимого (с <ins>)
Используйте <del>, если текст был удалён в процессе редактирования. Сочетайте его с <ins> для отображения замены — классический пример: цена со скидкой.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Price: <del>$50.00</del> <ins>$39.99</ins></p>
</body>
</html>Старая цена помечена как удалённая, а новая — как вставленная: связь между ними теперь несёт смысл, а не только визуальный эффект.
Вариант 2: <s> для больше не актуального содержимого
Используйте <s> для содержимого, которое больше не является точным или актуальным, но сохранено на странице для контекста — например, выполненный или недоступный пункт в списке. Этот тег не предназначен для обозначения правок в документе — для этого используйте <del>.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li><s>Buy milk</s> (already done)</li>
<li>Buy bread</li>
<li>Buy eggs</li>
</ul>
</body>
</html>Вариант 3: CSS line-through для чисто визуального зачёркивания
Если линия не несёт семантического смысла, используйте CSS-свойство text-decoration на несемантическом элементе, например <span> или <p>. Никогда не стилизуйте устаревший элемент strike — применяйте правило к корректной разметке.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.struck {
text-decoration: line-through;
}
</style>
</head>
<body>
<p><span class="struck">I am studying at the school.</span></p>
<p>I am studying at the university.</p>
</body>
</html>