Тег s отмечает текст, который больше не актуален, но остаётся на странице: например, старую цену рядом с новой. Название - от английского strikethrough, «зачёркивание». Тег парный, закрывающий обязателен, собственных атрибутов нет, только глобальные. Он входит в стандарт HTML и не устарел, а по умолчанию браузер проводит через текст линию.
<p>Чайник Аква-2: <s>1200 ₽</s> 990 ₽.</p>В этой статье
Что делает тег s в HTML
Тег s описывает текст, который был верным, но перестал быть актуальным: цена изменилась, места закончились, условие поменялось. Такой текст не удаляют, потому что он помогает читателю сравнить и понять, что изменилось. Справочник MDN называет два типичных случая: старая цена и «распродано».
Пример: три случая, где нужен s
Нажимайте на кнопки: в каждом случае устаревший текст зачёркнут, вокруг него показаны теги s, а под текстом написано, что именно отмечено и почему это не del.
Общее у всех случаев одно: текст остаётся на странице, а рядом указано то, что действует сейчас. Тег s ничего не удаляет и не сообщает, что документ редактировали.
Тег s, del или CSS: как выбрать
Зачёркнутый текст получают тремя способами, и выбор зависит от того, что произошло с текстом.
Текст устарел, но должен остаться на виду - нужен s. Текст удалили при правке документа, и читателю показывают, что убрано, - нужен del, а добавленное при той же правке отмечают ins. Линия нужна только для вида - берут класс и CSS.
<p>Чайник: <s>1200 ₽</s> 990 ₽.</p>
<p>Договор: <del>срок 10 дней</del> <ins>срок 14 дней</ins>.</p>
<h2 class="strike-title">Распродажа</h2>| Признак | s | del | Класс и CSS |
|---|---|---|---|
| Что сообщает | Текст больше не актуален | Текст удалён при правке | Ничего, только вид |
| Пример | Старая цена рядом с новой | Пункт, убранный из договора | Эффект в заголовке |
| Вид по умолчанию | Линия через текст | Линия через текст | Как задано в CSS |
| Роль в структуре доступности (Chromium 141) | Отдельной роли нет | deletion | Отдельной роли нет |
Вид у s и del одинаковый: мы проверили в Chromium 141, и у обоих, как и у устаревшего strike, линия проходит через середину текста цветом текста. Разница только в смысле, а на экране её не видно, поэтому важно выбирать тег осознанно.
Пример: подберите тег к ситуации
Под каждой ситуацией четыре кнопки. После выбора появляется разбор: верно или нет и почему. Внизу подсчёт ответов. Выбор можно менять.
Как выглядит s и как изменить стиль
Линию рисует свойство text-decoration со значением line-through, то есть «линия через текст». Линию можно перекрасить и сделать толще, не меняя цвет самого текста.
s {
color: #7A8090;
text-decoration-color: #b3261e;
text-decoration-thickness: 2px;
}Первая строка делает сам текст серым, вторая красит линию в красный, третья задаёт толщину линии 2 пикселя. Мы проверили эти свойства в Chromium 141: и цвет, и толщина линии меняются отдельно от цвета текста. Если прописать text-decoration: none, линия исчезнет, а тег останется: читатель перестанет видеть, что текст неактуален.
Атрибуты тега s и правила записи
Собственных атрибутов у s нет, работают только глобальные: class, id, title, lang, style и остальные. Тег парный: закрывающий </s> обязателен. Внутри допустимы только текст и другие строчные теги, блочные вроде p или div вкладывать нельзя.
<p>Было <s class="old-price">1200 ₽</s>.</p>
<s><p>Так нельзя: абзац внутри s.</p></s>Устарел ли тег s
Нет. В HTML 4 тег считался устаревшим, рядом с ним существовал похожий strike. В HTML5 тегу s дали смысл «текст больше не актуален», а strike остался устаревшим: вместо него берут s или del. Справочники MDN и Дока описывают тег так же.
Читают ли s программы чтения с экрана
В Chromium 141 у элемента s нет отдельной роли в структуре доступности, а у del она есть: deletion. MDN пишет, что программы чтения с экрана s по умолчанию не озвучивают. Мы это не проверяли ни в NVDA, ни в JAWS, ни в VoiceOver.
Линия не должна быть единственным носителем смысла: если читатель её не увидит, он получит устаревшую цену вместо действующей. Напишите то же словами: «Старая цена 1200 ₽, новая 990 ₽». Похожая ситуация с пометкой линией есть у тега u.
Частые ошибки
Большинство ошибок с этим тегом сводится к одной привычке: считать его кнопкой «зачеркнуть».
| Ошибка | Что происходит | Как исправить |
|---|---|---|
s вместо del при правке документа | Читатель не понимает, что это правка, и не видит, что добавлено | Использовать del и ins |
| Зачёркнуто, а действующего значения рядом нет | Читатель не знает, что теперь верно | Рядом указать новое значение |
s на весь абзац | Зачёркнутый абзац читать тяжело, а смысл «неактуально» размывается | Отмечать короткий фрагмент |
s ради красивого эффекта | Тег обещает «неактуально», а там просто оформление | Класс и text-decoration |
Устаревший strike | Тег не входит в стандарт | Использовать s или del |
