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