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

两个答案都很好。 cellForRow(at:)和s确实是语义标记，因此对可访问性很有帮助。不幸的是，没有浏览器在可访问性树中显示这些标签，因此屏幕阅读器无法传达有关这些标签的任何信息。但是您可以使用CSS来解决它。有一个simple blog谈论del元素，这也是语义上的，但不会将信息传达给屏幕阅读器，但博客提供了一种解决方法。您可以使用<mark>或s做类似的事情。也就是说，使用del或s ，但也使用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>

因此，您想向读者显示旧信息，同时又告诉该信息不再相关。

del部分4.6.2 The del element

中的规范中涵盖了您的TODO示例。

<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属性），而默认视图只能显示实际的当前内容（即{{ 1}}）。
如果与待办事项列表的含义相关，以显示已完成的操作，请继续del。
如果您的情况在删除某项（例如，由于偶然添加或没有任何意义等）和将某项标记为完成之间存在相关差异，那么您可能想要前者使用s，后者使用del。如果没有相关差异（例如，如果您仍然不继续显示前一种情况下的项目），则可以忽略这一点。

（注意：如果使用s，也可以使用ins添加新的待办事项。）

HTML中的<s>与<del>

3 个答案: