仅用于标记“曾对、现在错”的语义失效内容,如过期价格、停用功能;不可用于纯视觉划线或嵌套,禁用datetime/cite属性,替代方案用css text-decoration或配对。

用 <s></s> 标签标记“曾对、现在错”的内容
<s></s> 不是快捷划线工具,它只该用于表达语义上的状态失效:价格已下架、功能已停用、条款已废止——这些信息还留着,但不再准确或适用。比如电商页写 <s>¥199</s> ¥149,读屏器会播报“已废弃:¥199”,用户能立刻理解这是历史价而非错误价。
常见错误现象:<s></s> 被塞进 <button></button> 或 <a></a> 里,比如 <button><s>导出</s></button>。语义冲突:一个“已失效”的可点击元素?浏览器可能禁用焦点,读屏器直接跳过。
- ✅ 合理:
<s>IE8 兼容</s>(系统已不支持) - ✅ 合理:
<s>第十二条</s>(法律条文未删除,但已不适用) - ❌ 错误:
<s>请勿点击此处</s>(主观提示 ≠ 状态失效) - ❌ 错误:
<s>待办事项</s>(勾选后视觉反馈,无语义变更)
<s></s> 不能加 datetime 或 cite 属性
HTML5 明确禁止给 <s></s> 添加 datetime 或 cite。W3C 校验器会报错,Hugo/Jekyll 等静态站点生成器在严格模式下直接构建失败。
想补时间信息?别硬加属性。可行方案是:
- 在
<s></s>后紧跟<time datetime="2026-03-21">(已于2026年3月21日下架)</time> - 用自定义属性辅助 JS 处理:
<s data-expired="2026-03-21">¥199</s>,但读屏器不会识别它 - 真需要审计追踪?换
<del datetime="2026-03-21" cite="/docs/dep-notice.html"></del>
别把 <s></s> 当纯视觉工具用
99% 的“划掉文本”需求其实和语义无关,只是 UI 表达。此时必须用 CSS:text-decoration: line-through。它可控、可复用、无语义污染。
例如待办事项完成态、设计稿标注“暂不实现”、按钮灰显+横线——这些都没发生语义变化,不该动用 <s></s>。
- 推荐写法:
<p class="completed">写完报告</p>+.completed { text-decoration: line-through; color: #888; } - 避免对
<span></span>直接设display: block后加删除线,可能触发意外换行 -
text-decoration-thickness在 Safari 15.4+ 和 Chrome 99+ 才稳定支持;低版本回退到默认粗细
<s></s> 和 <del></del> 别混用、别嵌套
两者语义冲突:<del></del> 表示“已被移除”,<s></s> 表示“还在,只是不准了”。嵌套如 <del><s>xxx</s></del> 会让读屏器重复播报或跳过,WAVE 等无障碍工具会报 warning。
真实场景应拆解处理:
- 旧方案中的过时配置,写成:
<p>旧方案:<code><s>XML 配置</s> - 整段内容被正式删除,才在外层用
<del datetime="..."></del> - 法律修订、API 下线等需留痕的场合,必须用
<del></del>+<ins></ins>配对,且datetime必须为 ISO 8601 格式(如"2026-04-15T14:30:00Z")
真正容易被忽略的是那个判断前提:这段文字是“被删了”,还是“不对了”——标签选错,后续所有语义、SEO、无障碍努力都会打折扣。











