删除文本标签 - <del>

什么是 <del> 标签？

<del> 标签用于表示已经从文档中删除的文本。浏览器通常会在删除文本上添加一条删除线（贯穿线）。它与 <ins> 标签配合使用，可以显示文档的修改历史。

基本语法

html 
<del>已删除的内容</del>

语义与用法

<del> 标签用于表示文本的删除或修改，主要用于以下场景：

  • 文档版本控制中已删除的内容
  • 比较文档的不同版本
  • 显示修改建议或变更历史
  • 表示不再适用的信息

<del> 标签具有明确的语义含义，不仅改变文本的外观，还传达了文本已被删除的信息。

示例：

html 
<!-- 文档修改 -->
<p>会议时间：<del>上午10点</del> 下午2点。</p>

<!-- 版本比较 -->
<p>这个项目需要 <del>3个月</del> <ins>6个月</ins> 完成。</p>

<!-- 不再适用的信息 -->
<p>产品价格：<del>¥999</del> 现价：¥799。</p>

<!-- 修改建议 -->
<p>这个 <del>不好</del> <ins>优秀</ins> 的方案值得考虑。</p>

核心属性

cite 属性

cite 属性用于指定一个URL，该URL解释了删除文本的原因或提供了删除的来源。

html 
<p>
  会议时间：<del cite="https://example.com/meeting-update">上午10点</del> 下午2点。
</p>

datetime 属性

datetime 属性用于指定删除文本的日期和时间。日期和时间格式应符合ISO 8601标准。

html 
<p>
  会议时间：<del datetime="2026-02-06T10:00:00">上午10点</del> 下午2点。
</p>

与 <ins> 标签的配合使用

<del> 标签和 <ins> 标签经常一起使用，以显示文档的修改历史或变更：

示例：

html 
<!-- 显示修改前后的内容 -->
<p>
  我们将在 <del>周一</del> <ins>周二</ins> 上午 <del>9点</del> <ins>10点</ins> 召开会议。
</p>

<!-- 详细的修改信息 -->
<p>
  产品规格：
  <del datetime="2026-02-05T14:30:00">2GB RAM</del>
  <ins datetime="2026-02-05T14:30:00">4GB RAM</ins>
</p>

全局属性

<del> 标签支持所有HTML全局属性，包括 class、id、style、title 等。

示例：

html 
<!-- 使用class自定义样式 -->
<p>
  <del class="old-price">¥999</del> 现价：¥799
</p>

<!-- 使用style自定义样式 -->
<p>
  这是 <del style="text-decoration: line-through double red;">删除的文本</del>。
</p>

<!-- 使用title提供额外信息 -->
<p>
  <del title="2026-02-06 删除">旧内容</del>
  <ins title="2026-02-06 插入">新内容</ins>
</p>

最佳实践

  1. 用于实际删除的内容：仅在文本确实被删除或修改时使用 <del> 标签，不要用于装饰性目的。

  2. 与 <ins> 标签配合使用：当表示修改时，最好同时使用 <del> 和 <ins> 标签显示前后变化。

  3. 提供修改信息：使用 datetime 和 cite 属性提供修改的日期时间和原因，提高文档的可追溯性。

  4. 自定义样式：可以使用CSS来自定义删除线的样式，但应保持其可识别性。

  5. 考虑可访问性：确保删除文本的样式不会影响页面的可读性和可访问性。

好的示例：

html 
<!-- 清晰的修改记录 -->
<p>
  <del datetime="2026-02-06T10:00:00" cite="https://example.com/update">旧地址：北京市朝阳区</del>
  <ins datetime="2026-02-06T10:00:00" cite="https://example.com/update">新地址：北京市海淀区</ins>
</p>

<!-- 价格变动 -->
<p>
  <span class="product-name">智能手机</span>
  <del class="old-price">¥2999</del>
  <span class="current-price">¥2499</span>
  <span class="discount">8.3折</span>
</p>

不好的示例：

html 
<!-- 用于装饰性目的 -->
<p>
  <del>这只是为了添加删除线</del> <!-- 不推荐 -->
</p>

<!-- 没有上下文的删除 -->
<p>
  <del>旧内容</del> <!-- 没有说明什么替代了它 -->
</p>

<!-- 过度使用 -->
<p>
  <del>这</del> <ins>那</ins> 是 <del>不好</del> <ins>好</ins> 的。
</p>

浏览器兼容性

<del> 标签在所有现代浏览器中都得到广泛支持，它是HTML规范的基础部分。

总结

<del> 标签是HTML中用于表示已删除文本的语义化标签，它不仅在文本上添加删除线，还传达了文本已被删除的信息。与 <ins> 标签配合使用，可以有效地显示文档的修改历史和变更内容。正确使用 <del> 标签可以提高页面的语义化程度和可访问性，帮助用户更好地理解文档的修改过程。

最后更新：2026-02-07