该用 <del> 表示内容曾存在但被正式移除,强调编辑行为并支持 datetime 和 cite 属性;<s> 仅表示不再准确或不推荐,无编辑语义。

什么时候该用 <del> 而不是 <s>
<del> 表示内容**曾存在但被正式移除**,语义上强调“编辑行为”——比如文档修订、法律条文更新、价格调整记录。浏览器默认渲染为带删除线,但关键在它携带了 datetime 和 cite 属性,能说明“谁、何时、为何删”。<s> 则纯属“不再准确/不推荐”,不涉及编辑动作,比如过时的规格参数、已停售商品标价。
<del datetime="2024-03-15">¥299</del> ¥249</li> <li><code><s>支持 Windows XP</s>(现仅支持 Win10+)
- API 文档里改接口名,旧名用
<del>;废弃整个功能模块,用<s>
<del> 的 datetime 值必须是 ISO 8601 格式
浏览器不会校验 datetime 是否合法,但辅助技术(如读屏器)和搜索引擎会依赖它解析时间语义。错写成 2024/03/15 或 15-03-2024 会导致语义丢失,甚至被忽略。
- ✅ 正确:
datetime="2024-03-15T14:30:00Z"(UTC 时间优先) - ✅ 也可接受:
datetime="2024-03-15"(仅日期) - ❌ 错误:
datetime="2024.03.15"、datetime="Mar 15, 2024" - 注意:时间值不参与渲染,只影响机器可读性
视觉样式相同,但 SEO 和无障碍处理差异很大
两者默认都显示删除线,CSS 也都能用 text-decoration: line-through 覆盖。但搜索引擎会把 <del> 当作内容变更信号,可能影响快照版本判断;而读屏器对 <del> 通常会读出“已删除”,对 <s> 可能直接跳过或仅读文字本身。
- 电商页面降价,用
<del>更利于传达“原价已失效”这一事实 - 老版本兼容说明(如“IE8 不支持”)适合用
<s>,因它不暗示“被编辑”,只是状态标记 - 别为了样式统一强行用 CSS 抹掉删除线——那等于废掉语义
嵌套使用时,<del> 不能包 <s>,反之也不推荐
HTML 规范没禁止嵌套,但语义冲突。比如 <del><s>已停用</s></del> 逻辑混乱:既说“已被删除”,又说“仅是不推荐”,机器无法判断主次。
立即学习“前端免费学习笔记(深入)”;
- 真实场景中,二选一即可。要表达“某段文字被删,且其中某词还额外过时”,应拆成两层结构:
<p><del>旧方案:<code><s>XML 配置</s></code></del></p> - 若混用,部分屏幕阅读器可能重复播报或跳过内层
- 验证工具(如 WAVE)会对非常规嵌套发出警告


















