必须使用 <del> 标签标注商品原价，因其语义明确表示“已被删除的内容”，符合原价失效逻辑，且被屏幕阅读器正确识别；<s> 语义模糊易致歧义，影响无障碍与SEO。
<del> 是唯一推荐用于标注商品原价的 HTML 格式化标签，<s> 仅作兼容 fallback，不建议单独使用。
为什么必须用 <del> 而不是 <s>
<del> 明确语义为“文档中被删除的内容”，符合电商场景中原价已被替代、不再生效的逻辑；屏幕阅读器会读作“删除线 ¥199”，辅助用户理解价格变更。而 <s> 语义是“不再准确或不再相关”，偏向内容失效（如过期公告），容易引发歧义。浏览器默认样式虽一致，但语义错位会导致 SEO 权重稀释、无障碍支持打折扣。
<del> 必须配合 data-original 属性吗
不是必须，但强烈建议：
- JS 计算折后价时可直接读取
data-original值，避免从文本中正则提取数字（易受空格、单位干扰） - CSS 可针对
[data-original]统一控制删除线颜色/粗细，与纯视觉<s>隔离 - 服务端渲染或 SSR 场景下，该属性能保留原始数值，避免 JS 未加载时无法还原逻辑
示例：<del data-original="199">¥199</del>
立即学习“前端免费学习笔记（深入）”；
常见错误组合及后果
以下写法看似省事，实则破坏结构语义和后续扩展性：
- 用
<s>替代<del>：语义漂移，部分无障碍工具忽略其价格变更含义 - 把折扣信息塞进
<del>内部，如<del>¥199（已下架）</del>：破坏纯数值结构，JS 解析失败 - 用
<span style="text-decoration: line-through">：完全丢失语义，CSS 覆盖成本高，无法被爬虫或读屏软件识别 - 原价和折后价用两个独立
<div>并列：无父子关系，JS 批量查找时需额外约定 class 名，耦合度高
真正关键的不是“怎么加删除线”，而是让原价成为可被程序识别、可被辅助技术理解、可被样式独立控制的**语义节点**——<del> 是目前 HTML5 中唯一同时满足这三点的原生方案。
