HTML: зачеркивание

семантически верное зачеркивание с помощью HTML5

2020-04-17 dr.Brain

время чтения 3 мин.

CSS великолепно подходит для управления дизайном элементов сайта, но, к сожалению, непригоден для того, чтобы передавать их смысловое значение. К счастью, для этой цели есть другой инструмент - HTML-теги. Когда Вы зачеркиваете какой-то контент, нужно понимать причину - для чего Вы это делаете. Зачеркнутый текст приобретает семантическое значение, благодаря тегам <del> и <s>.

<s>Неактуальный текст</s>

~~Неактуальный текст~~

<del>Текст удален</del>

~~Текст удален~~

s или del

Как мы уже убедились, оба тега обеспечивают одинаковый визуальный эффект - зачеркнутый текст. Тем не менее, эти теги имеют разную смысловую нагрузку и не являются взаимозаменяемыми.

Обратимся к определениям.

s

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

Хороший пример: указание скидок в интернет-магазине:

<p><s>100 руб.</s> 90 руб.</p>

Цена: ~~100 руб.~~ 90 руб.

Тег <s> не используется при указании на редактируемый контент документа. Для этих целей есть тег <del>.

del

тег <del> нужен для зачеркивания текста, удаленного из документа.

Хороший пример: список дел:

<p>Выполнить:</p>
<ul>
  <li><del>устроиться на работу</del></li>
  <li>стать ведущим разработчиком</li>
</ul>

Выполнить:

~~устроиться на работу~~
стать ведущим разработчиком

Правило

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

del и ins

Совместное использование тегов <del> и <ins> - действительно отличная идея. Так можно создать интерфейс отслеживания изменений в документе.

Пример: текстовый редактор

<p>Это мой
  <del>прокет</del>
  <ins>проект</ins>
</p>

Это мой ~~прокет~~ проект

Пример: интерфейс git

<table>
  <tr>
    <td><del>+ function TEA() {</del></td>
    <td><ins>- function tea() {</ins></td>
  </tr>
</table>

strike

В некоторых документах все еще можно встретить тег <strike>. Этот тег считается устаревшим еще со времен HTML4. Он был заменен в HTML5 на семантически корректные теги <s> и <del>.

<s> и <del> поддерживаются всеми ведущими браузерами, включая Internet Explorer. Хотя, эти же браузеры все еще поддерживают тег <strike>. При создании новых HTML-документов все-таки следует избегать устаревших конструкций, отдавая предпочтение тегам <s> и <del>.

Совместимость

К сожалению, теги <s> и <del> не определяются современными скрин-ридерами. Псевдо-классы ::before и ::after позволяют анонсировать содержимое этих тегов. Однако, не стоит полагаться на такой подход, так как многие пользователи сознательно отключают анонсирование многословного контента.

del

del::before,
del::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}

/* MDN */

s

s::before,
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [start of stricken text] ";
}

s::after {
  content: " [end of stricken text] ";
}

/* MDN */

Спасибо за внимание.

Написано по материалам статьи Samantha Ming “Strikethrough using HTML5”.

doctor Brain