HTML中标签怎么用？

在HTML中，使用``标签标记删除内容，不仅能直观展示文本的删除效果，更重要的是赋予了内容语义化的意义，利于SEO优化。``标签结合`cite`和`datetime`属性，能够清晰说明删除原因和时间，提升网页可访问性，方便版本追溯。与表示内容过时的``标签区分，``强调内容的移除，而非单纯的样式表现。配合``标签，可以清晰展示内容的修改历史，例如产品描述的变更记录，实现类似文档修订的功能，为用户提供更清晰的内容演变信息。语义化的使用``标签，有助于搜索引擎更好地理解页面内容，提升用户体验。

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

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

解决方案

要标记HTML中的删除内容，最直接的方式就是使用标签将需要删除的文本包裹起来。这个标签通常会在浏览器中以文本上划线（strikethrough）的形式显示，但其核心价值在于其语义。

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

<p>原价：<del>¥199.00</del> 现价：¥149.00</p>

除了最基本的包裹功能，标签还有两个非常有用的可选属性：

• 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>

这让我想起，我们很多时候在文档修订时，只是简单地删掉旧内容，但实际上，保留这种“删除痕迹”对协作和理解历史版本至关重要。

为什么不直接删除内容，而要使用标签？

这确实是个好问题，我个人在早期接触HTML时也曾困惑过。直接从源代码中删除内容，从视觉效果上看似乎没什么区别，但这种做法忽略了语义化的强大力量。使用标签，本质上是在告诉机器（浏览器、搜索引擎爬虫、屏幕阅读器等）一个事实：这段内容曾经是有效的，但现在已经被移除了。

想象一下，如果你在维护一个电商网站，商品价格经常变动。如果只是简单地把旧价格删掉，然后写入新价格，那么用户可能就无法直观地看到价格的优惠力度，或者无法理解价格变动的历史。而标签则清晰地展示了“原价”的概念。

从技术层面讲，语义化标签有助于：

• 可访问性（Accessibility）：屏幕阅读器可以识别标签，并告知视障用户这部分内容已被删除，而不是简单地跳过或读出带删除线的内容。
• 搜索引擎优化（SEO）：搜索引擎能够更好地理解页面内容的演变。虽然我不能说它直接提升排名，但清晰的语义结构有助于搜索引擎更准确地解析页面内容，从而可能间接优化你的内容表现。
• 版本控制与审计：在团队协作中，尤其是在内容管理系统（CMS）里，标签能清晰地展示内容的修订历史，方便追溯和审计。这就像是代码仓库里的diff，清晰明了。
• 样式与脚本的灵活性：你可以通过CSS为标签定义独特的样式，或者通过JavaScript动态地操作这些被标记为删除的内容，这比直接删除内容拥有更大的灵活性。

所以，在我看来，使用标签不仅仅是视觉上的需求，更是对内容生命周期的一种负责任的标记。

标签与或标签有什么区别？

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

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

• (Strikethrough Content)：这个标签同样会在文本上显示删除线，但它的语义是表示内容已经不再准确或不再相关。它不是说内容被删除了，而是说它不再是事实或不再适用。例如，你可以在一个投票结果中，将某个不再被考虑的选项用标记。

• (Deprecated Strikethrough Text)：这个标签是HTML4中用来表示删除线的，但它在HTML5中已经被废弃了。它的作用纯粹是表现层的，没有任何语义。我们应该避免使用它，转而使用CSS的text-decoration: line-through;来实现视觉上的删除线效果，或者根据语义选择或。

举个例子，如果你在描述一个旧的、已经不再使用的技术规范，你可能会用来表示“这个已经过时了”，而不是“这个内容被删除了”。而如果你在修订一份合同，将某个条款彻底移除，那么就是最合适的选择。

简单来说，如果你想表达“这段内容被移除了”，用；如果你想表达“这段内容不再正确/相关”，用；如果你只是想在文本上画条线，用CSS。

如何结合标签，更好地展示内容修改历史？

在我处理一些需要展示内容修订历史的场景时，我发现和（Inserted Text）这对组合简直是天作之合。它们一起使用，可以非常清晰地展示文档的修改痕迹，就像是Word文档的“修订”功能。

标签用于标记被插入到文档中的内容。它通常会在浏览器中以下划线（underline）的形式显示。

当你想展示一个内容的修改过程，比如一个旧的描述被新的描述取代时，你可以这样组织你的HTML：

<p>
  产品的特点：
  <del datetime="2023-09-01T14:00:00Z">轻薄，续航一般。</del>
  <ins datetime="2023-10-25T16:30:00Z">超薄设计，长达10小时的电池续航。</ins>
</p>

在这个例子中：

• 标记了旧的、被删除的描述，并指明了删除时间。
• 标记了新的、被插入的描述，并指明了插入时间。

这样一来，读者就能一目了然地看到，产品描述从“续航一般”变成了“长达10小时的电池续航”，而且还能知道这些修改发生的时间。这对于那些需要追踪信息变化、或者需要理解文档演变过程的用户来说，提供了巨大的便利。

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

今天关于《HTML中标签怎么用？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！