应使用<del>标记有明确删改行为的内容,如法律修订、API下线等,并需搭配<ins>及datetime/cite属性;<s>仅用于标识自然失效或不推荐内容,不支持时间与来源属性。

该用 <s> 还是 <del>,关键看内容是否发生了「编辑动作」——有明确删改行为(含时间、原因、替换内容),就用 <del>;只是状态过时、失效或不推荐,就用 <s>。
什么时候必须用 <del> 而不是 <s>
核心判断依据是:有没有真实发生的、可追溯的删除行为。
-
<del>必须搭配<ins>使用才完整表达「删了什么、替换成什么」,比如法律条文修订、API 字段下线、文档版本 diff - 它支持
cite(指向删除依据的 URL)和datetime(ISO 8601 格式,如"2024-03-15T14:22:00Z"),这些属性会被读屏器和搜索引擎解析 - 错写
datetime="2024/03/15"或cite="删掉的原因"会导致语义丢失——浏览器不报错,但辅助技术可能直接跳过整段 - 电商页面写
<del datetime="2024-03-15">¥299</del> ¥249是对的;写成<s>¥299</s>就弱化了“原价已被正式替换”这一事实
什么时候该用 <s> 而不是 <del>
<s> 不表示“被删”,只表示“已失效”或“不再适用”,且不携带任何时间、来源信息。
- 适合标记停售商品、废弃兼容性说明(如
<s>IE8 兼容</s>)、过期优惠码、旧版参数名(如<s>xml_config</s>) -
<s>不支持cite或datetime属性,加了会被 HTML 校验器警告,也无实际语义价值 - 后台接口字段废弃但文档未说明原因?此时用
<s>比硬套<del>更诚实——毕竟你没证据证明是“谁在何时为何删的” - 用户评论里写“这个参数不对”,不能套
<s>——主观质疑 ≠ 客观失效
常见误用与渲染陷阱
视觉上两者都出删除线,但机器处理逻辑完全不同。
立即学习“前端免费学习笔记(深入)”;
- 用
<s>给促销价加删除线,读屏器可能读作“已废弃:¥199”,用户会困惑“这价格还能用吗?” - 用
<del>标临时缺货商品,但库存数据根本没删——这是语义造假,搜索引擎可能误判内容稳定性 - CSS 写
text-decoration: none抹掉删除线,等于废掉全部语义:读屏器听不到提示,SEO 失去变更信号 - 嵌套使用(如
<del><s>旧方案</s></del>)会造成语义冲突,主流读屏器可能重复播报或跳过内层
真正难的不是选标签,而是想清楚:这段文字背后,是有人动了编辑器删掉了它,还是它自己悄悄过期了?前者用 <del>,后者用 <s>——别让机器替你做判断。



















