<del> 标签表示语义化删除,告知浏览器、屏幕阅读器和搜索引擎该内容已被移除,非装饰用途;如版本日志中“已移除旧接口:getUserInfo()”。

用 <del> 标签表示语义化的删除动作
<del> 不是装饰性标签,而是明确告诉浏览器和辅助技术“这部分内容已被移除”。搜索引擎、屏幕阅读器都会识别其语义。比如版本更新日志里写“<p>已移除旧接口:<del>getUserInfo()</del>”,比纯 CSS 划线更利于可访问性和 SEO。
别用 <s> 标签替代 <del>
<s> 在 HTML5 中已被标记为“不推荐使用”,它只表示“内容不再准确或相关”,不强调删除行为本身。例如“<s>限时 99 元</s> 已涨价至 129 元” 这类场景勉强可用,但若涉及数据变更、法律条款修订、API 废弃等需留痕的场合,<s> 无法传达“被主动删除”的意图。
配合 <ins> 展示修改前后的完整上下文
单独用 <del> 容易让人困惑“删了之后换成什么?”。实际业务中(如合同修订、文档协同),应成对使用:
<p>服务费用由<del datetime="2026-04-15">¥80/月</del><ins datetime="2026-04-28">¥98/月</ins>调整</p>
-
datetime属性必须带 ISO 8601 时间戳,否则语义残缺 - 不要只靠颜色区分
<del>和<ins>,需保留默认删除线+下划线样式,确保弱视用户可辨识 - 避免嵌套
<del>或在<del>内再加text-decoration,会导致样式冲突或读屏器误读
需要自定义样式时,CSS 只补足,不替代语义
如果设计要求红色细删除线,可以用 CSS 覆盖,但前提是仍用 <del> 标签包裹内容:
del { text-decoration: line-through; text-decoration-color: #e53935; text-decoration-thickness: 1px; }
- 不要用
<span class="deleted">+text-decoration: line-through完全替代<del>,会丢失语义 -
text-decoration-thickness在 Safari 15.4+ 和 Chrome 99+ 才稳定支持,低版本会回退到浏览器默认粗细 - 若需兼容 IE,只能用
text-decoration: line-through单属性,颜色和粗细不可控
<del>,却不填 datetime,也不配 <ins>,结果既没留下修改证据,又没说明替代方案,最后变成一堆没人敢删的“幽灵删除线”。

















