Тег <s>
Описание
Тег <s> (от англ. "strikethrough") используется для отображения текста, который больше не является актуальным или правильным, перечёркивая его горизонтальной линией. В отличие от <del>, он не указывает на удаление из документа, а просто отмечает устаревшую информацию.
<p>Цена: <s>5000 руб.</s> 3500 руб.</p>
Ключевые особенности:
- Семантически обозначает устаревшую, но не удалённую информацию
- По умолчанию отображается с перечёркиванием (text-decoration: line-through)
- Не передаёт смысл удаления (для этого используйте
<del>) - Может содержать другие inline-элементы
- Поддерживается всеми браузерами
<!-- Промо-цена -->
<p><s>Старая цена: 100$</s> Новая цена: 75$</p>
<!-- Устаревшая информация -->
<p>Маршрут <s>№12</s> №14 теперь идёт до центра</p>
<!-- В списке -->
<ul>
<li><s>Купить молоко</s></li>
<li>Забрать посылку</li>
</ul>
Стилизация через CSS:
<style>
s {
color: #999;
text-decoration-color: #e74c3c;
text-decoration-thickness: 2px;
}
.discount s {
position: relative;
}
.discount s::after {
content: "✕";
color: #e74c3c;
margin-left: 5px;
}
</style>
<div class="discount">
<s>2990 руб.</s> 1990 руб.
</div>
Рекомендации по использованию:
- Используйте для отображения устаревших цен, скидок
- Для удалённого контента применяйте
<del> - Не используйте просто для декоративного перечёркивания
- Сочетайте с новым значением для сравнения
- Для неактивных элементов интерфейса лучше использовать CSS
<p>
<del>Удалённый текст</del> |
<s>Устаревший текст</s> |
<span style="text-decoration:line-through">Декоративное перечёркивание</span>
</p>
Тег <s> является семантически правильным способом выделения устаревшей информации, сохраняя при этом её видимость в документе и помогая пользователям сравнивать предыдущие и текущие данные.
Атрибуты
| accesskey | Горячая клавиша для активации элемента |
| class | CSS-классы для стилизации элемента |
| contenteditable | Разрешает редактирование содержимого |
| data-* | Пользовательские данные элемента |
| dir | Направление текста (ltr|rtl) |
| hidden | Скрывает элемент от отображения |
| id | Уникальный идентификатор элемента |
| lang | Язык содержимого элемента |
| spellcheck | Включает проверку орфографии |
| style | Инлайновые CSS-стили элемента |
| tabindex | Порядок перехода при навигации по Tab |
| title | Всплывающая подсказка для элемента |
| translate | Определяет возможность перевода содержимого |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 3.0 | 1.0 | 3.0 | 1.0 | 1.0 |