Блог Сравнение ins, del и s

html5

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

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

Определения этих двух элементов очень просты:

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

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

  • Записи изменений в официальных документах, таких как протоколы собрания или законные акты.
  • Пометки изменений в статье – в дополнение к журналистским корректировкам, что помогает сохранить редакционную целостность и избежать «переписывания материала».
  • Обозначения различий между двумя версиями документа (разница), к примеру, для обозначения редакционных корректировок.
  • Обозначения значительного добавления или удаления контента, о котором необходимо знать людям, читающим документ.

В некоторых случаях изменения должны быть точно обозначены. Однако стоит помнить, что если изменений много, то их обозначение становится непрактичным (или невозможным) – поэтому используйте эти элементы только в тех случаях, когда это действительно необходимо.

Условные границы параграфа

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

See the Pen ImAFl by Andrey Siaglo (@webmolot) on CodePen.

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

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

See the Pen beJxG by Andrey Siaglo (@webmolot) on CodePen.

Атрибуты datetime и cite

Элементы <ins> и <del> также могут содержать два дополнительных атрибута, datetime и cite. Datetime используйте для регистрации даты (и как вариант — времени) совершённого изменения. В атрибуте cite содержится URL-ссылка на более подробную информацию об изменении.

See the Pen GrAou by Andrey Siaglo (@webmolot) on CodePen.

Как правило, datetime и cite скрытые данные, но их можно сделать видимыми, предварительно украсив через css.

See the Pen suqAK by Andrey Siaglo (@webmolot) on CodePen.

Или даже лучше – можно добавить сноску, например:

See the Pen aFqgx by Andrey Siaglo (@webmolot) on CodePen.

Убедитесь в необходимости использования del при удалении контента. Возможно вам необходимо просто закомментировать контент посредством <!-- --> или удалить его из HTML источника.

Элемент s

В спецификации s описывается следующим образом:

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

Изначально, элементы s и его предшественник strike являлись элементами стиля шрифта. Они практически перестали использоваться в HTML 4 и совсем не используются в HTML 5. Однако, некоторые случаи семантического использования получили шанс на вторую жизнь. Например, для отметки первоначальной цены какого-либо товара на распродаже, а также обозначения окончания периода времени. К примеру, при продаже первой партии билетов на какое-либо мероприятие. Данный контент является источником полезной информации, поэтому удалять её мы не хотим. Однако мы хотим подчеркнуть, что данная информация более не является точной. Ещё один пример использования — это использование устаревшей, но всё ещё значимой информации, которая не является результатом редактирования.

Например, если бы элемент s использовался для Кикстартера, это могло бы выглядеть следующим образом:

s против del

Уверен, кто-то обязательно отметит в комментариях, что элемент s уже наступает на семантические пятки элемента del :)

Однако, существует едва различимая, но существенная разница. Элементы ins и del используются для отображения редакционных изменений и, как правило, это касается уже опубликованных страниц.

Элемент s используется для обозначения информации, которая уже не является точной, либо актуальной, однако, всё ещё является ценной.

Ян Хиксон описывает разницу таким образом:

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

Оформление ins, del, и s

По умолчанию, стили браузера представляют собой следующее:

  • <ins>: text-decoration: underline (пример)
  • <del>: text-decoration: line-through (пример)
  • <s>: text-decoration: line-through (пример)

Используемое по умолчание оформление ins очень похоже на обозначение ссылки. Что ещё хуже, используемые по умолчанию стили del и s — идентичны (несмотря на то, что их редко можно встретить вместе). Для понимания контекста необходимо визуально выделить эти элементы.

Фразаобразующий стиль ins и del

Вот некоторые стили, которые я использую для ins и del:

Стили ins

See the Pen gIkLe by Andrey Siaglo (@webmolot) on CodePen.

Стили del

See the Pen ypsGc by Andrey Siaglo (@webmolot) on CodePen.

Потоковый стиль ins и del

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

See the Pen cwqou by Andrey Siaglo (@webmolot) on CodePen.

Заключение

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

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

Итак, что Вы думаете? Вы использовали данные элементы? А после прочтения статьи будете использовать? Предлагайте свои способы их стилизации. Оставляйте свои комментарии!

Оригинал: http://html5doctor.com/ins-del-s/

Поделиться ссылкой на статью:

Предыдущая статья
Следующая статья

Комментарии

Андрей 30 августа 2013 года, 11:09 #

Давненько наблюдаю за Вашим блогом и просто в восторге от статей. И эта не является исключением :)

Дмитрий 13 февраля 2015 года, 19:41 #

Напишите пжалста про TH, THEAD, TFOOT и TBODY ;) вот это будет круто.

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com