HTML <s> Тег
Тег HTML <s> отмечает текст, который устарел или потерял актуальность. Отличия от <del> и <strike> с примерами.
Тег HTML <s> отмечает текст, который больше не является точным или актуальным — но буквально не был удалён из документа. Это строчный элемент, и браузеры по умолчанию отображают его содержимое с зачёркиванием (горизонтальная линия через текст).
Классический пример использования — отображение цены со скидкой: старая цена остаётся видимой, но перечёркнутой, рядом с текущей ценой распродажи. Это сообщает читателю: «раньше было так; а вот что актуально сейчас».
<s> — это действительный элемент HTML5, он не устарел. Устаревший тег — <strike>, который никогда не следует использовать на новых страницах. Вместо него используйте <s> (семантика) или CSS text-decoration: line-through (чисто стилистически).
Синтаксис
Тег <s> используется парно. Содержимое помещается между открывающим (<s>) и закрывающим (</s>) тегами.
Пример — зачёркивание цены
Это наиболее распространённое, идиоматическое использование <s>: исходная цена больше не актуальна, поэтому она зачёркнута, а цена распродажи показана как текущая.
HTML <s> Тег
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
Hurry, sale ends soon!
<s>Was $50.00</s>
<strong>Now $29.99</strong>
</p>
</body>
</html>Результат
<s> vs <del> vs <strike>
Все три тега создают линию через текст, но имеют совершенно разный смысл. Выбор правильного тега делает ваш HTML семантичным, а не просто визуально оформленным.
| Тег | Значение | Когда использовать… | Статус |
|---|---|---|---|
<s> | Содержимое больше не является точным или актуальным | Старая цена, устаревшая деталь, изменившаяся рекомендация — исходный текст никогда не был «удалён», он просто заменён. | Действительный HTML5 |
<del> | Содержимое было удалено в результате редакторского изменения | Отслеживание правок в документе. Естественно сочетается с <ins> для вставленного текста. Поддерживает атрибуты cite и datetime для указания почему и когда. | Действительный HTML5 |
<strike> | Зачёркивание (только оформление) | Никогда — используйте <s> или <del> вместо него. | Устаревший |
Кратко: используйте <s>, когда смысл — «это больше не так», и <del>, когда смысл — «это было отредактировано». Если нужна только визуальная линия без особого смысла, используйте CSS text-decoration: line-through на обычном элементе.
Доступность
По умолчанию программы чтения с экрана не объявляют зачёркивание — вспомогательные технологии читают содержимое <s> так же, как любой другой текст. Зрячий пользователь видит «Was $50.00» перечёркнутым, но пользователь программы чтения с экрана может просто услышать «Was $50.00» без какого-либо намёка на устарелость.
В случаях, когда перечёркнутое состояние несёт важный смысл, добавьте визуально скрытый текст, поясняющий это:
<p>
<s><span class="visually-hidden">Old price: </span>Was $50.00</s>
<strong>Now $29.99</strong>
</p>.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}Атрибуты
Тег <s> поддерживает глобальные атрибуты и атрибуты событий. Собственных атрибутов у него нет.
Стилизация
Браузеры уже применяют text-decoration: line-through к <s>, поэтому для получения линии CSS не нужен. Стилизация — это необязательное переопределение, например, чтобы изменить цвет зачёркнутого текста без повторного объявления линии:
s {
color: gray;
}