HTML-тег <s>

HTML-тег <s> используется для обозначения того, что текст стал некорректным, нерелевантным или утратил актуальность. Визуально тег <s> применяет эффект перечёркивания к тексту, обозначая его устаревший или недействительный статус, сохраняя при этом его читаемость для справочных целей.

Тег <s> обычно используется в таких контекстах, как маркировка устаревшего контента, отображение устаревших цен или отображение правок в текстовых документах.

Базовый синтаксис HTML-тега <s>

Базовая структура тега <s> :

<s>Strikethrough Text</s>

Браузер применяет к вложенному тексту зачеркнутый стиль.

Пример использования тега <s>

Вот пример обозначения устаревшей цены в контексте электронной коммерции:

<!DOCTYPE html>
<html>
    <body>
        <h2>Product Pricing</h2>
        <p>Original Price: <s>$100</s> Now: $80</p>
    </body>
</html>

Пояснение: Первоначальная цена $100 перечеркнута тегом <s> , что означает, что она больше недействительна. Текущая цена $80 отображается без перечёркивания.

Оформление тега <s> с помощью CSS

Вы можете настроить внешний вид текста внутри тега <s> с помощью CSS:

<!DOCTYPE html>
<html>
    <head>
        <style>
            s {
                color: red;
                text-decoration: line-through;
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h2>Styled Strikethrough</h2>
        <p>This item was <s>out of stock</s> but is now available!</p>
    </body>
</html>

Результат: зачеркнутый текст выделен красным цветом и курсивом для большей выразительности.

Атрибуты HTML-тега <s>

Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .
Атрибуты событий: позволяет использовать обработчики событий, такие как onclick , onmouseover и т. д.

Эти атрибуты можно использовать для применения дополнительных стилей или интерактивности к тегу <s> .

Разница между <s> и похожими тегами

<s>: представляет текст, который больше не является точным или актуальным, например устаревший контент или неверные значения.
<del>: представляет текст, удаленный из документа, часто с семантическим указанием на удаление.
<strike>: устаревший тег, похожий на <s> , используемый для зачеркивания в старых версиях HTML.

Тег <s> используется для визуального зачеркивания, не подразумевающего семантического удаления, тогда как тег <del> следует использовать для контента, удаленного по семантическим причинам.

Практическое применение тега <s>

Цены: отображайте первоначальные цены вместе со скидками.
Исправления: отметить текст как неправильный или устаревший, не удаляя его полностью.
Редакционные изменения: отображайте правки в документах, статьях или обзорах для обеспечения прозрачности.
Уведомления пользовательского интерфейса: указывают на недоступные или устаревшие параметры в раскрывающихся списках, формах или меню.