使用标签标记删除内容，可赋予文本语义化意义，结合cite和datetime属性能说明删除原因与时间，提升可访问性、seo及版本追溯能力；与（内容过时）和废弃的区分，强调语义而非表现；配合标签可清晰展示内容修改历史，如产品描述变更及时间记录，实现类似文档修订功能。
在HTML中，我们使用
<del>标签来标记被删除的内容。这不仅是为了视觉上的呈现，更重要的是赋予了这些内容语义上的意义，告诉浏览器、辅助技术以及搜索引擎这部分文本曾经存在但现在已被移除。
解决方案
要标记HTML中的删除内容，最直接的方式就是使用
<del>标签将需要删除的文本包裹起来。这个标签通常会在浏览器中以文本上划线（strikethrough）的形式显示，但其核心价值在于其语义。
比如，如果你想表示一个旧的价格被新价格取代，你可以这样写：
<p>原价：<del>¥199.00</del> 现价：¥149.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>
除了最基本的包裹功能，
<del>标签还有两个非常有用的可选属性：
cite
：这个属性可以指向一个URL，解释为什么内容被删除，或者在哪里可以找到删除的理由。这对于内容的审计或追踪非常有帮助。datetime
：这个属性用于指定内容被删除的日期和时间。它的值必须是有效的日期或时间字符串，例如2023-10-27T10:00:00Z
。
结合这两个属性，标记删除内容可以更具信息量：
<p> 旧的规定：<del cite="https://example.com/policy-changes#v1" datetime="2023-01-15T09:30:00Z">所有员工必须在上午9点前打卡。</del> 新的规定：所有员工弹性工作。 </p>
这让我想起，我们很多时候在文档修订时，只是简单地删掉旧内容，但实际上，保留这种“删除痕迹”对协作和理解历史版本至关重要。
为什么不直接删除内容，而要使用<del>
标签？
这确实是个好问题，我个人在早期接触HTML时也曾困惑过。直接从源代码中删除内容，从视觉效果上看似乎没什么区别，但这种做法忽略了语义化的强大力量。使用
<del>标签，本质上是在告诉机器（浏览器、搜索引擎爬虫、屏幕阅读器等）一个事实：这段内容曾经是有效的，但现在已经被移除了。
想象一下，如果你在维护一个电商网站，商品价格经常变动。如果只是简单地把旧价格删掉，然后写入新价格，那么用户可能就无法直观地看到价格的优惠力度，或者无法理解价格变动的历史。而
<del>标签则清晰地展示了“原价”的概念。
从技术层面讲，语义化标签有助于：
-
可访问性（Accessibility）：屏幕阅读器可以识别
<del>
标签，并告知视障用户这部分内容已被删除，而不是简单地跳过或读出带删除线的内容。 - 搜索引擎优化（SEO）：搜索引擎能够更好地理解页面内容的演变。虽然我不能说它直接提升排名，但清晰的语义结构有助于搜索引擎更准确地解析页面内容，从而可能间接优化你的内容表现。
-
版本控制与审计：在团队协作中，尤其是在内容管理系统（CMS）里，
<del>
标签能清晰地展示内容的修订历史，方便追溯和审计。这就像是代码仓库里的diff
，清晰明了。 -
样式与脚本的灵活性：你可以通过CSS为
<del>
标签定义独特的样式，或者通过JavaScript动态地操作这些被标记为删除的内容，这比直接删除内容拥有更大的灵活性。
所以，在我看来，使用
<del>标签不仅仅是视觉上的需求，更是对内容生命周期的一种负责任的标记。
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
<del>
标签与<s>
或<strike>
标签有什么区别？
这个问题我经常在前端社区里看到有人讨论，而且有时还会被混淆使用。在我看来，区分它们的核心在于“语义”和“表现”这两个词。
<del>
(Deleted Text)：这个标签是语义化的。它明确表示其包含的内容已经从文档中被删除。它传达的是一种内容状态的改变。如前所述，它通常会通过删除线来呈现，但这种呈现方式只是默认样式，其真正价值在于其语义。<s>
(Strikethrough Content)：这个标签同样会在文本上显示删除线，但它的语义是表示内容已经不再准确或不再相关。它不是说内容被删除了，而是说它不再是事实或不再适用。例如，你可以在一个投票结果中，将某个不再被考虑的选项用<s>
标记。<strike>
(Deprecated Strikethrough Text)：这个标签是HTML4中用来表示删除线的，但它在HTML5中已经被废弃了。它的作用纯粹是表现层的，没有任何语义。我们应该避免使用它，转而使用CSS的text-decoration: line-through;
来实现视觉上的删除线效果，或者根据语义选择<del>
或<s>
。
举个例子，如果你在描述一个旧的、已经不再使用的技术规范，你可能会用
<s>来表示“这个已经过时了”，而不是“这个内容被删除了”。而如果你在修订一份合同，将某个条款彻底移除，那么
<del>就是最合适的选择。
简单来说，如果你想表达“这段内容被移除了”，用
<del>；如果你想表达“这段内容不再正确/相关”，用
<s>；如果你只是想在文本上画条线，用CSS。
如何结合<ins>
标签，更好地展示内容修改历史？
在我处理一些需要展示内容修订历史的场景时，我发现
<del>和
<ins>（Inserted Text）这对组合简直是天作之合。它们一起使用，可以非常清晰地展示文档的修改痕迹，就像是Word文档的“修订”功能。
<ins>标签用于标记被插入到文档中的内容。它通常会在浏览器中以下划线（underline）的形式显示。
当你想展示一个内容的修改过程，比如一个旧的描述被新的描述取代时，你可以这样组织你的HTML：
<p> 产品的特点： <del datetime="2023-09-01T14:00:00Z">轻薄，续航一般。</del> <ins datetime="2023-10-25T16:30:00Z">超薄设计，长达10小时的电池续航。</ins> </p>
在这个例子中：
<del>
标记了旧的、被删除的描述，并指明了删除时间。<ins>
标记了新的、被插入的描述，并指明了插入时间。
这样一来，读者就能一目了然地看到，产品描述从“续航一般”变成了“长达10小时的电池续航”，而且还能知道这些修改发生的时间。这对于那些需要追踪信息变化、或者需要理解文档演变过程的用户来说，提供了巨大的便利。
我个人觉得，这种方式比单纯地替换内容要高级得多，它不仅保留了历史信息，还通过语义化标签，让机器也能理解这些修改的意图。这在法律文本、产品规格文档或者任何需要精确版本控制的场景中，都显得尤为重要。
