CSS идеально подходит для управления дизайном веб-страниц, однако он не предназначен для передачи смыслового значения элементов. Для этого в HTML предусмотрены специальные теги. Один из таких случаев — использование зачеркнутого текста, который может быть представлен тегами <del> и <s>. Эти теги помогают пользователю понять, что именно произошло с контентом.
Примеры использования <s> и <del>
Тег <s>
Тег <s> используется для обозначения текста, который больше не является точным или актуальным. Например, если в интернет-магазине товар был по одной цене, а затем его стоимость снизилась, старую цену можно указать с использованием <s>. Это поможет пользователям увидеть, что цена изменена, но товар все еще доступен.
<p><s>100 руб.</s> 90 руб.</p>
В данном примере зачеркнутый текст «100 руб.» указывает на старую цену товара, а «90 руб.» — на новую актуальную цену.
Тег <del>
Тег <del> применяется для обозначения текста, который был удален из документа. Это важно, например, при редактировании списков задач или при отслеживании изменений в документах.
<p>Выполнить:</p>
<ul>
<li><del>устроиться на работу</del></li>
<li>стать ведущим разработчиком</li>
</ul>
В данном случае «устроиться на работу» зачеркнуто, указывая, что эта задача была выполнена или больше не актуальна.
Сравнение <s> и <del>
Хотя оба тега создают визуально похожий эффект — зачеркнутый текст, их семантическое значение различается. Тег <s> используется для обозначения контента, который уже не актуален, но может быть полезен для справки. Тег <del>, напротив, указывает на текст, который был удален или более не является частью документа.
Комбинирование <del> и <ins>
Теги <del> и <ins> могут использоваться вместе для создания интерфейсов, отслеживающих изменения в документах. Например, в текстовых редакторах или системах контроля версий, таких как Git, такие комбинации позволяют пользователю видеть, что было удалено и добавлено.
Пример использования <del> и <ins>
<p>Это мой
<del>прокет</del>
<ins>проект</ins>
</p>
Здесь слово «прокет» удалено, а «проект» добавлено, что ясно указывает на исправление ошибки.
Устаревший <strike>
Ранее для зачеркнутого текста использовался тег <strike>, который теперь считается устаревшим и заменен на <s> и <del> в HTML5. Современные браузеры поддерживают все эти теги, однако рекомендуется использовать актуальные теги для создания семантически правильного контента.
Совместимость и доступность
К сожалению, современные скрин-ридеры могут не распознавать теги <s> и <del> как семантически значимые. Для улучшения доступности можно использовать псевдо-классы ::before и ::after, добавляя дополнительную информацию о начале и конце зачеркнутого текста.
Пример CSS-кода:
del::before,
del::after {
content: " [удалено] ";
}
s::before,
s::after {
content: " [устаревший текст] ";
}
Эти подходы помогают сделать веб-контент более доступным и понятным для всех пользователей.
