<del> 是 HTML 中表示“内容被删除但保留可见”的最语义正确方式，它默认渲染删除线，支持屏幕阅读器和搜索引擎识别，不可用 <s> 或 text-decoration: line-through 替代。
用 <del> 标签加删除线最语义正确
HTML 里表示“内容被删除但保留可见”的标准方式是 <del>，它天生渲染为删除线，且对屏幕阅读器友好，搜索引擎也能识别其语义。别用 <s> 或纯 CSS 模拟——<s> 仅表示“不再准确/不推荐”，不适用于价格变更这类真实删除场景；CSS 的 text-decoration: line-through 缺少语义，辅助工具无法感知意图。
常见错误：把 <del> 套在整段价格块外导致样式错位，或误用 <strike>（已废弃，IE8 及更早才支持，现代浏览器不保证兼容）。
实操建议：
-
<del>必须包裹纯文本或内联元素（如<span>），不能直接包<p>、<div>等块级元素 - 若需控制删除线颜色或粗细，用 CSS 覆盖：
del { color: #999; text-decoration-color: #e00; }（注意text-decoration-color在 Safari 旧版本中需加-webkit-前缀） - 配合
<ins>标签标注新价格，形成“删旧补新”的完整语义链
价格标注典型 HTML 结构怎么写
电商或促销页最常见的价格对比结构是“原价删掉 + 现价突出”，必须确保 DOM 层级清晰、语义无歧义。以下是最简可靠写法：
立即学习“前端免费学习笔记（深入）”；
<p class="price"> <del>¥199</del> <ins>¥129</ins> </p>
说明：
-
<del>和<ins>都是内联元素，天然适合嵌套在<p>中，无需额外包裹<span> - 避免写成
<p><del>¥199</del><strong>¥129</strong></p>：用 <code><strong>仅强调重要性，不表达“新增”语义；<ins>才是正确选择 - 如果现价需更大字号或红色，直接给
<ins>加 class，例如<ins class="new-price">，再用 CSS 控制字体大小和颜色
<del> 的浏览器兼容性和性能影响
<del> 是 HTML4 就存在的标签，所有现代浏览器（Chrome/Firefox/Safari/Edge）及 IE9+ 均原生支持，无需 polyfill。渲染开销几乎为零——它只是个内联样式指令，不触发重排（reflow），也不增加 JS 解析负担。
唯一要注意的点：
- 部分老旧 CMS 或富文本编辑器会自动过滤
<del>标签（尤其 WordPress 默认 editor 会清掉），发布前务必检查源码是否被 strip 掉 - 若用在 SSR（服务端渲染）场景，确保模板引擎未对
<del>做特殊转义（比如某些 PHP 模板会把<转成） - 不要为了“统一风格”强行用 JS 动态插入
<del>：DOM 操作比静态标签慢，且首屏可能闪动
为什么不用 CSS 的 line-through 直接加删除线
单纯用 style="text-decoration: line-through" 确实能出效果，但绕过了语义层。问题集中在三个实际场景：
- 无障碍访问：NVDA、VoiceOver 等读屏软件不会告知用户“这段文字被删除了”，只会读出文字本身，残障用户无法理解价格变动逻辑
- SEO 风险：Google 不会将
line-through样式与“降价”“失效”等语义关联，而<del>在结构化数据（如 Schema.org Product）中可被明确映射 - 维护成本：当团队多人协作时，“用 class 还是 inline style？class 名叫
old-price还是strikethrough？”这类命名争议会反复出现；而<del>是唯一无歧义的标准解
真正需要 CSS 删除线的情况极少，比如给第三方 SDK 注入的不可修改 HTML 补样式，或老系统无法改标签只能 hack —— 这种属于妥协方案，不是首选。
删线本身很简单，难的是让机器和人都明白“为什么删”。语义标签不是装饰，是网页的骨架。
