标签表示内容不再准确或相关，适用于过时信息如旧价格；2. 标签表示内容被删除，适用于文档修订等场景，可配合datetime和cite属性；3. 纯视觉删除线应使用CSS的text-decoration: line-through，用于待办事项完成等无语义变化的情况；4. 选择依据是语义：信息过时用s，内容被删用del，仅视觉效果用CSS。
HTML删除线可以通过
和
这两个语义化标签来实现，它们虽然视觉效果相似，但在语义层面有着显著的区别，各自适用于不同的场景。此外，纯粹的视觉需求也可以通过CSS来满足。
解决方案
在HTML中设置删除线，最直接且语义明确的方式就是使用
和
标签。
标签，全称是“strikethrough”，它表示内容已经不再准确或不再相关。想象一下你在一个网站上看到一件商品的原价，现在打折了，原价就会被划掉。这个被划掉的原价，就是“不再准确”的信息。它告诉读者，这部分内容曾经是正确的，但现在已经过时了。
原价：
¥199.00现价：¥99.00立即学习“前端免费学习笔记（深入）”；
旧的地址：
北京市朝阳区某某路123号新的地址：北京市海淀区某某路456号
而
标签，全称是“deleted text”，它表示文档中已被删除或移除的内容。这个标签通常用于标记文档修订、版本控制或者追踪修改。它强调的是“内容被删除”这一行为，而不是仅仅“不再准确”。
标签还可以配合
cite属性（指向解释删除原因的URL）和
datetime属性（表示删除发生的时间）来提供更详细的上下文信息。
这篇文章的草稿中，我们曾写道：
“AI将完全取代人类工作。”经过讨论，此观点已修正。用户评论：
（此评论因违反社区规定已被删除）谢谢您的反馈。
从视觉上看，浏览器默认都会给这两个标签内的文本添加一条横穿的删除线。但它们背后的语义意图，才是我们选择时真正需要考量的。
和
标签在语义上有什么区别？
说到底，这两个标签最大的区别就在于它们所传达的“意图”或者说“语义”。在我看来，理解这一点是正确使用它们的关键。
标签的语义核心是“不再准确”或“不再相关”。它暗示着内容本身曾经是有效的，但随着时间推移、信息更新，它已经失去了其准确性或关联性。举个例子，一家商店的促销活动，原价被划掉，表示这个价格现在已经不适用了，新的价格才是当前的。它不是说这个价格“被删除了”，而是说它“过时了”。它的作用更像是给读者一个提醒：这部分信息已经失效了，请关注旁边的最新信息。
而
标签的语义则更为严肃和具体，它强调的是“内容被移除”或“被删除”这一事实。这通常发生在文档修订、版本更新、内容审查等场景。比如，你在编辑一份合同，其中某段条款被删除，这时就应该使用
来标记。它不仅仅是视觉上的划掉，更是告诉搜索引擎和辅助技术（如屏幕阅读器），这部分内容在文档的当前版本中已经不存在了。它甚至可以配合
datetime属性，精确到秒地记录内容被删除的时间，这在需要追溯历史修改的场景下尤其有用，比如法律文书或学术论文的修订记录。
简单来说，
是“这个信息现在不对了”，而
是“这个信息被拿掉了”。这种区别，对于构建语义清晰、易于理解和维护的网页内容至关重要。
除了
和
，还有其他方法可以实现删除线效果吗？
当然有，而且在某些情况下，它可能是更合适的选择。除了这两个语义标签，我们还可以利用CSS的
text-decoration属性来纯粹地实现视觉上的删除线效果。
text-decoration属性是一个非常强大的CSS属性，它可以控制文本的装饰线，包括下划线（
underline）、上划线（
overline）和删除线（
line-through）。
.strikethrough-visual {
text-decoration: line-through;
}这是一段纯粹视觉上被划掉的文字。
什么时候应该用CSS而不是
或
呢？答案很简单：当删除线仅仅是为了“好看”或者“表示状态”，而没有“不再准确”或“内容被删除”的语义时。
举个例子，你有一个待办事项清单（To-Do List），当一个任务完成时，你希望它被划掉。这个“划掉”仅仅是表示任务的状态从“未完成”变成了“已完成”，它并没有说这个任务内容本身“不准确”了，也没有说这个任务“被删除了”。在这种情况下，使用CSS的
text-decoration: line-through;是最恰当的。
- 完成项目报告
- 安排会议
- 回复邮件
这样做的好处是，你将内容的语义（
text-decoration）清晰地分开了。这符合Web开发的最佳实践，即结构（HTML）、样式（CSS）和行为（JavaScript）分离的原则。如果你为了一个纯粹的视觉效果而滥用
或
，反而会给搜索引擎和辅助技术传递错误的语义信息，这在我看来是得不偿失的。
值得一提的是，HTML早期还有一个
标签，它的作用就是纯粹地给文本加删除线，但它是一个纯粹的表示性标签，在HTML5中已经被废弃了。所以，我们应该避免使用它，转而使用CSS或者语义更明确的
和
。
如何选择合适的删除线标签或样式？
选择正确的删除线方式，其实就是理解你的内容想表达什么。这事儿有点像在厨房里选工具，勺子、叉子、筷子都能吃东西，但吃面条、喝汤、夹菜，各有各的顺手。
核心原则是：语义优先。 始终问自己，我为什么要给这段文字加上删除线？
-
内容“不再准确”或“不再相关”了？
- 选择：
标签。 -
场景： 旧价格、过时的信息、错误的描述。比如，你更新了一个产品的规格，旧的规格信息就可以用
划掉。 -
例子：
CPU:
Intel i5-9400FIntel i7-12700K
- 选择：
-
内容“被删除”或“被修订”了？
- 选择：
标签。 - 场景： 文档修订历史、法律条文修改、用户评论被管理员删除、文章中的错误内容被修正并移除。它强调的是“移除”这个动作。
-
例子：
在会议纪要中，
我们曾计划推迟项目启动日期，但最终决定按原计划进行。
- 选择：
-
纯粹是视觉效果，没有语义上的“不准确”或“删除”？
- 选择：CSS
text-decoration: line-through;
。 - 场景： 待办事项清单中已完成的任务、购物清单中已购买的商品、或者任何仅仅需要视觉上划掉但内容本身没有语义变化的场景。
- 例子：
- 完成报告撰写 （CSS中
.task-completed { text-decoration: line-through; }） - 选择：CSS
在实际工作中，我发现很多人会混淆这几者，或者为了方便直接用CSS。但从长期维护、可访问性（屏幕阅读器对不同标签的处理可能不同）和搜索引擎优化（SEO）的角度来看，正确地使用语义标签是更专业的做法。当你给内容赋予了正确的语义，它就能更好地被机器理解，这对于信息传递的准确性和效率都有着不可忽视的价值。所以，花点时间思考一下你的删除线到底想表达什么，这绝对是值得的。
