vs in HTML

Question

所以我正在用HTML编写待办事项列表。其中一些待办事项已经完成。

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

现在我想知道标记和设计这些项目的最佳方法是什么。每当它完成时，我可以用<s>，which seems much more acceptable these days标记每个项目，因为它“不再相关”：

<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

两个答案都很棒。 s和del确实是语义标签，所以它对可访问性有好处。遗憾的是，没有浏览器在辅助功能树中显示这些标签，因此屏幕阅读器无法传达有关标签的任何信息。但你可以用CSS来解决它。有一个simple blog谈论<mark>元素，这也是语义但不向屏幕读者传达信息，但博客提供了一个解决方法。你可以用s或del做类似的事情。也就是说，使用s或del，但也使用CSS来增加屏幕阅读器用户的标签。

Answer 2

一个类没有语义含义，所以如果可访问性和语义对你很重要，那么你必须使用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 The del element中的规范中

<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是一种非正式的附加信息。

Answer 3

在简单的HTML中，class值没有任何意义。除了使用语义元素之外，您还可以使用类（类可以用于CSS，JavaScript，文档目的等），但是您不应该使用类而不是语义元素。

使用del和s，您可以找到在这种情况下有意义的两个相关元素。哪一个使用？它很可能没有实际的区别。

语义差异很微妙：

• 使用del，您传达的内容已从文档中删除（从语义上讲，如果内容仍然可见或者您使用CSS在视觉上隐藏它并不重要）。它表示对文档的实际编辑。
• 使用s，您传达的内容不再相关。

我猜你展示完成项目的目的可以帮助我们选择使用哪个元素：

• 如果待办事项列表也能正常工作而不显示已完成的项目（因此显示它们的目的是跟踪更改或检测错误），请转到del。理论上，用户代理可以提供在特定时间点查看列表（利用datetime属性），并且默认视图只能显示实际当前内容（即，在del中没有任何内容）。
• 如果它与todo列表的含义相关，以显示已经完成的操作，请转到s。
• 如果您在移除项目之间存在相关差异（例如，因为它是偶然添加的，或者没有意义等）并且将项目标记为已完成，那么您可能希望将del用于前者和s为后者。如果没有相关差异，您可以忽略这一点（例如，如果您不继续显示前一种情况中的项目）。

（旁注：如果使用del，使用ins添加新的待办事项也是有意义的。）