Сравнение и противопоставление <ind>, <del> и <s>

С давних времен HTML 2 у нас есть возможность обозначать добавленную или удалённую информацию семантически используя элементы <ins> и <del> соответственно. Хоть на первый взгляд они и кажутся незамысловатыми, эти элементы обладают скрытыми возможностями. Кроме того, я проведу сравнение и противопоставление <del> и <s>, который после забвения к нам вернулся в HTML5. Начнем с <ins> и <del>…

Использование ins и del

У этих двух элементов есть очень чёткое определение:

Элементы ins и del служат для представления изменений в документе.

Элемент ins обозначает информацию, которая была добавлена в документ.

Элемент del обозначает информацию, которая была удалена из документа.

— Текущая спецификация HTML от WHATWG

Итак, о каких изменениях идёт речь? Эти элементы можно использовать чтобы:

Это не касается тех редких случаев когда изменения должны быть описаны более подробно, а скорее тех, когда нужно просто отобразить наличие незначительных грамматических изменений или изменений в манере изъяснения без изменения смыслового содержания текста. Если нужно, можно добавить примечание в подвале или сбоку статьи с объяснением сути изменения. Также учтите что обозначать все изменения может быть неудобно (или даже невозможно), лучше использовать эти элементы только когда нужно явно обозначить изменения.

«Невидимые границы абзаца»

Необычным в <ins> и <del> является то, что их можно использовать для фразообразующего или потокового контента (выражаясь на языке HTML 4, они могут быть строчными или блочными). Например, вот добавленный абзац, в котором была удалена часть фразообразующего контента:

<!-- блочный ins -->
<ins>
  <!-- строчный del -->
  <p>Сегодня я встретился с <del>летучими обезьянами</del> доктором. Диагноз оказался не слишком оптимистичным.</p>
</ins>

Обратите внимание, что в браузерах эти элементы будут по умолчанию стилизированы как строчные; чтобы применить к ним блочное отображение, нужно указать display: block;. Мы поговорим об этом позже.

Спецификация предупреждает, что элементы «не должны пересекать невидимые границы абзацев». Это может случиться когда фразообразующий контент (текст или строчные элементы) не помещен в блочный элемент-обёртку и расположен рядом с блочным элементом того же уровня. Например:

<div>
  <p>Этот текст помещен в блочный элемент.</p>
  <!-- здесь проходит невидимая граница абзаца -->
  Черт подери! Кое-кто забыл о тегах абзаца!
</div>

Разумеется, мы всегда помещаем текст в элемент-контейнер, так что нас это не касается. И все же, теперь вы об этом знаете ^_^

Также нужно убедиться что каждый элемент <ins> и <del> является строчным или блочным, но не тем и другим одновременно. Например, не помещайте открывающий тег в середине одного абзаца, а закрывающий — в середине следующего.

<!-- Так неправильно -->
<p>Летучие обезьяны могут <del>быть плохим признаком.</p>
<p>Чтобы защититься от них нужно</del> завопить.</p>

<!-- строчный del -->
<p>Летучие обезьяны могут <del>быть плохим признаком.</del></p>
<p><del>Чтобы защититься от них нужно</del> завопить.</p>

<!-- блочный del -->
<del>
  <p>Летучие обезьяны могут быть плохим признаком.</p>
  <p>Чтобы защититься от них нужно завопить.</p>
</del>
<p>Летучие обезьяны могут завопить.</p>

Атрибуты datetime и cite

Элементы <ins> и <del> также могут принимать два необязательных атрибута, datetime и cite. Вы уже знакомы с datetime по нашей статье об элементе <time>, для <ins> и <del> он работает точно так же. Используйте его чтобы указать дату (и по желанию время) изменения:

<p><del datetime="2012-09-13">Задание: добавить пример использования datetime.</del>  <ins datetime="2012-09-14T10:21:44+09:00">Для этого текста с помощью атрибута datetime указана дата и время, когда он был добавлен.</ins></p>

cite также должен быть вам знаком если вы читали нашу статью Оформление цитат с помощью blockquote, q, cite и атрибута cite. Он содержит ссылку на дополнительную информацию об изменении.

<!-- Сноски или внутристраничные ссылки также могут быть помещены в cite -->
<ins cite="#ins-1">Этот текст был вставлен с использованием атрибута cite, содержащим ссылку на дополнительную информацию.</ins>

Поскольку в большинстве случаев это скрытая информация, она имеет все шансы превратиться в метахлам. Этого можно избежать сделав cite видимым с помощью CSS:

<style>
ins[cite]:after,
del[cite]:after {
  content: " (" attr(cite) ")";
  font-size: 75%;
  line-height: 0;
  color: #888;
}
</style>
…
<ins cite="http://html5doctor.com/more-info/123">[Вставленный текст…] Больше информации об этом дополнении.</ins>

[Вставленный текст…] Больше информации об этом дополнении.

Пример демонстрирующий как с помощью CSS можно представить значение атрибута cite в качестве сгенерированного содержимого

Более того, посмотрите как можно добавить эту ссылку в виде обычного содержимого:

<ins>Это обновление к статье<a href="#ins-1">¹</a>.</ins>
…
<footer>
  <h2>Изменения в статье</h2>
  <ol>
    <li id="ins-1">Это дополнение было добавлено <time datetime="2012-09-14T10:21:44+09:00">14-го сентября 2012 года</time> Оли Стадхолмом.</li>
  </ol>
</footer>

И наконец, убедитесь что вам действительно нужно с помощью <del> указать что данный текст был удалён. В противном случае можно закомментировать текст посредством <!-- --> или удалить его из разметки.

Элемент s

Вот как спецификация описывает элемент s:

Элемент s представляет содержимое, которое более не является истинным или актуальным.

— Текущая спецификация HTML от WHATWG

Исторически сложилось так <s> (и устаревший <strike>) были элементами физического форматирования, которые были признаны устаревшими в HTML4, и отброшенными в HTML5. Однако <s> вернулся, так как в ряде случаев его
использование оправдано семантически. Его можно использовать чтобы пометить исходную цену продукта, для которого объявлена скидка или же указать прошедшие временные рамки для, например, заблаговременной покупки билета на какое-либо событие. Эти данные являются ценной информацией, которую мы не хотим удалять, однако она больше не является верной и нам нужно это указать. Элемент s можно применять для обозначения любой устаревшей, но всё еще значимой информации, которая стала таковой не в результате правок. Элемент <s> можно использовать для сарказма (однако это спорный вопрос) или обозначения фрагментов ваших философствований Sous rature1 для поклонников Жака Дерриды (Jacques Derrida). Что ж… всяко бывает ;-).

К примеру, если на сайте для привлечения денежных средств Kickstarter использовался <s>, это бы выглядело следующим образом:

Пример

Элемент <s> используется чтобы семантически указать что нужная сумма собрана

s против del: кто кого?

Определённо элемент <s> схож с <del>, когда речь идёт об их семантике, уверен это не останется незамеченным в комментариях :) Однако между ними есть хоть и маленькое, но существенное различие. <ins> и <del> предназначены для внесения редакторских правок, в основном в материалы, которые уже опубликованы. Элемент <s> служит для обозначения информации, которая больше не является истинной или актуальной, но имеет некую ценность и зачастую встречается в документах, где указан и новый, и старый вариант этой информации одновременно.

Вот как Гикси (Hixie) описал разницу:

Другими словами, когда используется <del> легко можно представить документ без текста помещённого в тег <del>. Когда используется <s>, нельзя представить версию документа без текста внутри <s>, потому что последний является неотъемлемой частью документа несмотря на то, что он означен как устаревший.

— Ян Хиксон (Ian Hickson) в ветке WHATWG по IRC

Стилизируем ins, del и s

Браузеры применяют следующие стили по умолчанию:

Подчёркивание, которое используется для стилизации <ins> по умолчанию, делает его похожим на посещённую ссылку, что приводит к классической проблеме юзабилити. Хуже того, по умолчанию для <del> и <s> применяется одинаковый стиль (хоть вы скорее всего и не будете использовать их вместе). Тем не менее, в большинстве случаев если на глаз можно различить содержимое <s> и <del>, стиль text-decoration: strikethrough; вполне сойдёт.

Стилизация строчных ins и del

Вот некоторые стили которые я в свое время использовал для <ins> и <del>:

Стили для ins

Обычный текст с зелёным подчёркиванием

ins {
  border-bottom: 1px solid #47ad09;
  text-decoration: none;
}

пример вставленного текста

Зелёный текст с едва заметным подчёркиванием

ins {
  border-bottom: 1px solid #ccc;
  text-decoration: none;
  color: #388807;
}

пример вставленного текста

Обычный текст со светло-зелёным фоном

ins {
  text-decoration: none;
  background-color: #d4fcbc;
}

пример вставленного текста

Стили для del

Серый текст

del {
  text-decoration: none;
  color: #777;
}

пример удалённого текста

Красный текст

del {
  text-decoration: none;
  color: #91081f;
}

пример удалённого текста

Обычный или серый текст со светло-красным фоном

del {
  text-decoration: none;
  background-color: #fbb6c2;
  color: #555;
}

пример удалённого текста

Убедитесь что стилизация <ins> не позволяет перепутать его с ссылкой. Если они отличаются только по цвету, их цвета должны быть легко различимы, даже для людей с дефектом цветовосприятия. Не прячьте содержимое <del> с помощью display: none; — если оно больше не нужно, лучше удалите его или закомментируйте. Обеспечьте отличие <del> от <s> если вы используете их вместе.

И наконец, я предпочитаю не использовать text-decoration: line-through; для <del>, так как это ухудшает читаемость текста. Однако, когда дело касается s, этот стиль по умолчанию как нельзя кстати, так как трудно придумать для него более подходящее оформление.

Стилизация блочных ins и del

По умолчанию браузеры воспринимают <ins> и <del> как строчные элементы и стилизируют их соответственно. Если вы хотите сделать их блочными, используйте display: block;. К тому же, даже самые ненавязчивые стили из приведённых выше могут быть слишком кричащими для целых абзацев текста, не стоит даже говорить что для изображений, например, они и вовсе неприменимы. Я задаю стили для строчных <ins> и <del> и добавляю классы с более высоким приоритетом для тех случаев, когда они являются блочными:

Блочный <ins> с зелёной левой границей

.ins-block {
  display: block;
  margin-left: -1em;
  border-left: 0.5em solid #47ad09;
  /* стили с более высоким приоритетом чем у строчных ins, например
  text-decoration: none; */
  padding-left: 0.5em;
}

Алиса сидела со старшей сестрой на берегу и маялась: делать ей было совершенно нечего, а сидеть без дела, сами знаете, дело нелегкое; раз-другой она, правда, сунула нос в книгу, которую сестра читала, но там не оказалось ни картинок, ни стишков. "Кому нужны книжки без картинок.- или хоть стишков, не понимаю!" — думала Алиса.

Блочный <del> с красной левой границей и бледным текстом

.del-block {
  display: block;
  margin-left: -1em;
  border-left: 0.5em solid #91081f;
  /* стили с более высоким приоритетом чем у строчных del, например
  text-decoration: none; */
  padding-left: 0.5em;
  color: #777;
}

С горя она начала подумывать (правда, сейчас это тоже было дело не из легких — от жары ее совсем разморило), что, конечно, неплохо бы сплести венок из маргариток, но плохо то, что тогда нужно подниматься и идти собирать эти маргаритки, как вдруг… Как вдруг совсем рядом появился белый кролик с розовыми глазками!

Также можно добавить подпись:

Блочный <ins>: зелёная граница с подписью со сгенерированным содержимым

.labeled-ins-block {
  display: block;
  margin-left: -1.25em;
  border-left: 0.75em solid #47ad09;
  padding-left: 0.5em;
}
.labeled-ins-block:before {
  position: relative;
  display: block;
  content: "Addition";
  left: -1.55em; /* подгоняем размер */
  top: 5em; /* подгоняем размер */
  width: 0;
  height: 0;
  font: 0.6em/0 "Helvetica Neue", Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  color: #fff;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

Пользователи WordPress должны учитывать что мой заклятый враг wpautop только посмеётся над вашей попыткой использовать блочные <ins> и <del>. Используйте «Форматировать эту публикацию: без форматирования».

Итог

Итак, мы рекомендуем использовать <ins> и <del> для правок опубликованного документа, но только когда явное указание этих правок принесет пользу тем, кто просматривает соответствующую страницу. Используйте <s> чтобы обозначить информацию, которая больше не является истинной или актуальной, но удаление которой приведёт к негативным последствиям для остального контента. Уделите особое внимание стилизации этих элементов чтобы избежать похожести на ссылки (для <ins>) и друг на друга (для <del> и <s>). И наконец, помните что <ins> и <del> могут быть использованы для строчного и блочного контента (но не для обеих сразу), а <s> может быть использован только для строчного.

Я заметил тенденцию к отсутствию даты в URL статьи, при этом автор сознательно пытается поддерживать статью в актуальном состоянии. Если вы делаете так же, <del> и <ins> окажутся очень полезными для правок. С другой стороны, <s> видимо обречен остаться одним из непопулярных, но полезных элементов, который вам вряд ли когда-нибудь пригодится, но если все-таки пригодится — то его существование окажется очень кстати.

Что вы думаете по этому поводу? Используете ли вы эти элементы? Будете ли вы их использовать после прочтения этой статьи? Есть ли у вас ещё какие-либо идеи по стилизации этих элементов? Поделитесь своими мыслями в комментариях!

Примечания

1 философский приём, активно использованный Жаком Дерридой. Предусматривает вычёркивание слова в тексте, при этом оно остаётся на своем месте и может быть прочитанным. Используется в случаях когда слово или выражение «неуместно но необходимо».