别让文字“凭空消失”：HTML <del> 标签的语义价值与实战细节

你在电商平台刷商品时，常能看到原价被划掉，旁边标着新的折扣价。如果仅仅是为了让用户看到那条横线，随手写一段 CSS text-decoration: line-through 似乎就能搞定。但在代码层面，这种做法其实浪费了浏览器的天然能力。HTML 中专门有个 <del> 标签，正是为这种“被删除且有理由的内容”而生的。

很多初学者容易把它当成纯样式工具，这有点低估它的价值。 的核心意义在于“语义化”。当你在代码里明确告诉浏览器“这段文字被删除了”，浏览器不仅会默认渲染成删除线，更重要的是，它能配合辅助技术（比如屏幕阅读器）向视障用户传达信息——这里的内容已失效或被修正。这对于无障碍访问体验至关重要，也是现代前端开发必须遵守的规范。

在实际项目中，我们处理文档修订或价格调整时，可以结合两个属性来增强信息密度：cite 和 datetime。这两个属性常被教程忽略，但非常实用。cite 属性用于指向一个 URI，解释为何内容被删除；datetime 则记录删除发生的具体时间。想象一下后台日志系统，当展示版本对比时，加上这些标记，开发者一眼就能追溯变更的时间点和原因，比单纯靠注释要清晰得多。

来看一个具体的场景。假设你要展示一篇公告的历史变更记录，正确的写法不是只给文字加个横线：

<p>
  原定于 <del cite="#change-log-v2">2023 年 10 月 1 日</del> 
  举行的活动，现已调整为 <time datetime="2023-11-15">11 月 15 日</time>。
</p>

在这段代码里， 包裹了旧日期，并附带了修改原因链接；同时配合原生 标签使用，结构更加严谨。如果此时用户使用辅助工具阅读网页，语音合成软件可能会播报：“原文本‘十月一日’已被删除”，这就避免了用户产生困惑，不知道是因为显示错误还是真的取消了这个日期。

当然，使用时也有几个坑需要避开。其一， 标签内部不能包含其他交互性过强的元素，比如按钮，这会影响用户体验逻辑。其二，尽量不要为了纯粹的美观效果强行使用它。如果只是想把名字写错后改过来，且不需要保留错误痕迹，直接替换文字即可，过度保留“被删除”的痕迹反而会造成页面杂乱。有时候，视觉上的清理比代码上的语义堆砌更重要。

归根结底，代码是为人和机器共同服务的。使用 不仅仅是为了划线，更是为了在页面上保留一种“可追溯的诚实”。当你下次再处理价格变更、文档勘误或是状态更新时，不妨多想想这段历史信息的留存方式。良好的语义标记能让你的页面在搜索引擎眼中更有条理，对用户而言也更具包容性。少一点炫技，多一点对内容的尊重，这才是前端开发的应有之义。