HTML删除内容怎么标记_HTML的del标签标记删除内容

使用<del>标签标记删除内容，可赋予文本语义化意义，结合cite和datetime属性能说明删除原因与时间，提升可访问性、SEO及版本追溯能力；与<s>（内容过时）和废弃的<strike>区分，强调语义而非表现；配合<ins>标签可清晰展示内容修改历史，如产品描述变更及时间记录，实现类似文档修订功能。

在html中，我们使用

<del>

标签来标记被删除的内容。这不仅是为了视觉上的呈现，更重要的是赋予了这些内容语义上的意义，告诉浏览器、辅助技术以及搜索引擎这部分文本曾经存在但现在已被移除。

解决方案

要标记HTML中的删除内容，最直接的方式就是使用

<del>

标签将需要删除的文本包裹起来。这个标签通常会在浏览器中以文本上划线（strikethrough）的形式显示，但其核心价值在于其语义。

比如，如果你想表示一个旧的价格被新价格取代，你可以这样写：

<p>原价：<del>¥199.00</del> 现价：¥149.00</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>

标签不仅仅是视觉上的需求，更是对内容生命周期的一种负责任的标记。

<del>

标签与

<s>

或

<strike>

标签有什么区别？

这个问题我经常在前端社区里看到有人讨论，而且有时还会被混淆使用。在我看来，区分它们的核心在于“语义”和“表现”这两个词。

• <del>

  (Deleted Text)：这个标签是语义化的。它明确表示其包含的内容已经从文档中被删除。它传达的是一种内容状态的改变。如前所述，它通常会通过删除线来呈现，但这种呈现方式只是默认样式，其真正价值在于其语义。

  

  AliGenie 天猫精灵开放平台

  天猫精灵开放平台

  42

  查看详情

• <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小时的电池续航”，而且还能知道这些修改发生的时间。这对于那些需要追踪信息变化、或者需要理解文档演变过程的用户来说，提供了巨大的便利。

我个人觉得，这种方式比单纯地替换内容要高级得多，它不仅保留了历史信息，还通过语义化标签，让机器也能理解这些修改的意图。这在法律文本、产品规格文档或者任何需要精确版本控制的场景中，都显得尤为重要。