<s> против <del>в HTML

Question

Итак, я пишу список задач в HTML. Некоторые из этих задач вполне выполнены.

<h1>TODO</h1>
<ul>
  <li>I'm still to be done</li>
  <li>I'm done</li>
</ul>

Теперь мне интересно, как лучше разметить и оформить эти предметы. Каждый Когда это будет сделано, я могу пометить каждый элемент с помощью <s>, , что кажется гораздо более приемлемым в наши дни , так как это «больше не актуально»:

<li><s>I'm done</s></li>

Я мог бы пойти на <del>, так как, в некотором смысле, пользователь отредактировал список и установил этот пункт для удаления (вроде):

<li><del>I'm done</del></li>

Я мог бы добавить класс, чтобы сказать, что означает этот элемент:

<li class="todo done">I'm done</li>

Или какая-то комбинация из трех. Или что-то совсем другое.

Меня беспокоит доступность и семантика - я хочу, чтобы разметка передавала значение «готового» элемента.

Какой лучший способ сделать это?

Answer 1

В обычном HTML значения class не передают никакого значения. Вы можете использовать классы в дополнение к использованию семантических элементов (классы могут быть полезны для CSS, JavaScript, документирования и т. Д.), Но вы не должны использовать классы вместо семантических элементов.

С del и s вы нашли два соответствующих элемента, которые могут иметь смысл в этом контексте. Какой использовать? Это, скорее всего, не имеет практического значения.

Семантические различия тонки:

• С помощью del вы передаете, что содержимое было удалено из документа (семантически, не имеет значения, является ли содержимое по-прежнему видимым или визуально скрыто с помощью CSS) , Он представляет собой фактическое редактирование документа.

• С помощью s вы передаете, что содержимое больше не актуально .

Полагаю, цель показа готовых предметов может помочь в выборе элемента:

• Если список задач может также работать без отображения готовых элементов (поэтому их отображение имеет целью отслеживание изменений или обнаружение ошибок), перейдите к del. Теоретически, пользовательский агент может предлагать просмотр списка в определенный момент времени (используя атрибут datetime), а представление по умолчанию может отображать только фактическое текущее содержимое (т. Е. Без содержимого в del). .

• Если в значении списка задач необходимо показать, что уже сделано, перейдите к s.

• Если в вашем случае есть существенная разница между удалением элемента (например, потому что он был добавлен случайно или не имеет смысла и т. Д.) И маркировкой элемента как выполненного, то вы можете захотеть используйте del для первого и s для второго. Вы можете игнорировать это, если нет соответствующей разницы (например, если вы все равно не будете показывать элементы из первого случая).

(Примечание: при использовании del имеет смысл также использовать ins для добавления новых элементов todo.)

Answer 2

Оба ответа великолепны. s и del действительно являются семантическими тегами, так что это хорошо для доступности. К сожалению, ни один браузер не отображает эти теги в дереве доступности, поэтому программы чтения с экрана не могут передавать какую-либо информацию о тегах. Но вы можете обойти это с помощью CSS. Существует простой блог , в котором говорится об элементе <mark>, который также является семантическим, но не передает информацию читателям экрана, но блог дает обходной путь. Вы можете сделать что-то подобное с s или del. То есть, используйте s или del , но также используйте CSS для расширения тега для пользователей программы чтения с экрана.

Answer 3

Класс не имеет семантического значения, поэтому, если для вас важны доступность и семантика, вы должны использовать del или s.

Если вы должны использовать s или del, сказать нелегко. Для s спецификации имеют этот пример:

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

Таким образом, вы хотите показать читателю старую информацию, но также сказать, что эта информация больше не актуальна.

Ваш пример TODO описан в разделе del 4.6.2. Элемент del

<h1>To Do</h1>
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>

Я думаю, что главное отличие в том, что у вас больше возможностей добавлять семантическую информацию в del, чем в s. Так что del больше о том, действительно ли важна информация, что что-то было удалено, например, отслеживание изменений (инструмент сравнения), список TODO, что часть спецификации была удалена, .... И s - это какая-то неофициальная дополнительная информация.