del标签用于标记内容已被删除、不再准确或已过期，具有明确语义，不可仅作视觉hack；应正确嵌套于内联元素中，配合ins使用，并注意无障碍与seo影响。
del 标签不是装饰，它有明确的语义含义
<del></del> 不是用来“加删除线样式”的视觉 hack。它的作用是标记**内容已被删除、不再准确或已过期**——比如商品原价被促销价替代时，原价就该用 <del></del> 包裹。浏览器默认渲染为带删除线，但这只是语义的副产品；屏幕阅读器会读作“已删除：¥199”，搜索引擎也据此理解内容变更。
正确嵌套 del 标签的常见场景
价格对比是最典型用例，但必须注意结构合法性：
-
<del></del>必须包裹纯文本或内联元素（如<span></span>、<sup></sup>），不能直接包<div> 或 <code><p></p> - 不要写成
<del><span>¥199</span></del> <span>¥129</span>这种松散结构——语义上“¥199 被删”和“¥129 是新价”之间无关联 - 推荐用
<span class="price"><del>¥199</del><ins>¥129</ins></span>，<ins></ins>明确标出新增内容，形成语义对 - 用
text-decoration-line: line-through替代旧式text-decoration，更可控 - 删除线颜色建议与文字色一致（
text-decoration-color: currentColor），避免默认灰色造成歧义 - 若要提升可读性，可加
text-decoration-thickness: 1px和text-decoration-offset: 2px，让线离文字稍远些 - 切勿用
color: #999模拟“过期感”——这丢失了语义，且对色觉障碍用户不友好 - 屏幕阅读器默认会 announce
<del></del>内容，但不会说明“为什么删”。如需补充原因，应加aria-label（例如<del aria-label="原价已于2024年6月1日失效">¥199</del>） - 搜索引擎会把
<del></del>内容计入页面文本，但权重显著低于正常文本。频繁滥用（比如全页价格都套<del></del>）可能被判定为误导性展示 - 服务端渲染时，确保
<del></del>内容真实过期——前端 JS 动态插入<del></del>却没同步更新数据源，会导致语义与事实脱节
del 标签在 CSS 中的样式控制要点
默认删除线位置偏低、粗细固定，常需微调：
容易被忽略的无障碍与 SEO 影响
很多团队只关注视觉效果，却漏掉两个关键点：
<del></del> 当成样式开关，而忘了它本质是内容状态声明。只要内容没真正“被删”，就别用它。
