不推荐用<s>标记过期价格，因其语义仅为“不再相关”而非“时间性失效”；应使用<del datetime="...">配合<ins datetime="...">准确表达价格变更及生效时间。
用 <s> 标签标记过期价格是否合规
不推荐。HTML5 中 <s> 的语义是“不再准确或不再相关的内容”，但它**不表示时间性过期**，也不传达“已被替代”或“已失效”的明确意图。搜索引擎和屏幕阅读器会将其理解为内容被弃用，但不会关联到日期、时效性或新旧对比。
常见误用场景：在电商页写 <s>$199</s> $149，指望它自动表达“原价已失效”。实际效果只是视觉上加删除线，语义层面既不告诉爬虫“这是旧价”，也不帮视障用户理解“这个价格已被新价取代”。
<del> 比 <s> 更合适的原因
<del> 明确表示“已被删除的内容”，且支持 datetime 属性，能标注删除发生的时间点——这对价格变更、政策更新等场景至关重要。
- 可用
datetime记录价格失效时间：<del datetime="2024-03-15T10:30">$199</del> - 辅助技术（如读屏软件）会朗读“已删除，2024年3月15日上午10点30分”
- 搜索引擎更倾向将
<del>内容识别为被主动撤回的信息，而非单纯样式修饰 -
<s>不允许嵌套<ins>，而<del>可自然搭配<ins>构成完整变更记录
正确组合：用 <del> + <ins> 表达价格变更
仅划掉旧价不够，必须同时标明新价及其生效依据。否则语义断裂，机器无法推断“哪个是当前有效值”。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
<p>价格更新：<del datetime="2024-03-15T10:30">$199</del> <ins datetime="2024-03-15T10:30">$149</ins></p>
注意点：
-
datetime值必须是完整 ISO 8601 时间（含时区或 Z），不能只写日期 - 两个标签的
datetime值应一致，表示同一时刻完成替换 - 避免把
<ins>放在<del>外部（如<del>...</del><ins>...</ins>是合法的，但包裹在同一<p>内更利于上下文理解） - 不要用 CSS 覆盖
<del>的默认删除线样式而不提供替代文本——这会让依赖样式的用户丢失语义
为什么不用纯 CSS 删除线替代语义标签
用 text-decoration: line-through 实现视觉删除线，看似省事，但彻底丢失结构化信息。
后果包括：
- 屏幕阅读器完全无法感知该价格已失效
- 搜索引擎可能仍将旧价计入页面价格摘要（rich snippet）
- 无法通过 DOM 查询筛选“已下架价格”，影响前端价格监控逻辑
- 无障碍检测工具（如 axe）会报出“缺少语义标记”错误
语义不是装饰——当价格变动涉及法律披露（如促销价需标明原价及有效期）时，<del> 的 datetime 就是可验证的时间证据。这点绕不开。
