在HTML里实现删除线效果主要有两种方式：一种是使用语义化标签<del>和<s>，另一种是通过CSS的text-decoration属性设置line-through值。这三种方法在浏览器中呈现的视觉效果几乎一样，都是文字中间多了一条横线，但它们背后的语义完全不同，使用的场景也有明显区别。选对了标签，不仅页面好看，搜索引擎和屏幕阅读器也能正确理解你的内容。
简单来说，如果你想表达某段内容已经被删除、被修改，属于文档修订的范畴，就应该用<del>标签；如果只是想表达内容不再准确、不再相关，比如过期价格、失效信息，用<s>标签更合适；而纯粹为了视觉上加一条横线，不带有任何语义，那就直接用CSS样式来实现。
del标签：标注被删除或被修改的内容
<del>标签是HTML规范中明确定义为"已从文档中删除的内容"的语义标签。它最典型的应用场景是商品价格调整、文章内容修订、合同条款变更等需要展示修改痕迹的地方。浏览器默认会把<del>包裹的文字渲染成删除线样式，但更重要的是，它向机器传递了明确的语义信息：这段文字虽然还在页面上，但已经不算数了。
<del>标签有两个常用的可选属性。第一个是cite属性，值为一个URL，指向解释删除原因的文档；第二个是datetime属性，用合法的日期格式记录删除发生的时间。这两个属性不会在页面上直接显示，但可以被搜索引擎、爬虫或自动化工具读取，用于追溯内容变更历史。
<p> 原价：<del datetime="2024-06-01T10:00:00">￥299</del> 现价：<ins>￥199</ins> </p>
上面这个例子是电商页面中非常经典的做法：用<del>划掉原价，再用<ins>标签标注新价格。<ins>是与<del>配套的插入标签，默认渲染为下划线样式，表示"新添加的内容"。两者搭配使用，可以完整地表达一次内容修订，这也正是HTML规范设计这对标签的初衷。需要注意的是，<del>和<ins>既可以包裹行内文字，也可以作为块级容器使用，当它们包含多个块级元素时，浏览器也能正确处理。
s标签：标注不再准确或已经过期的内容
<s>标签的全称是strikethrough，它表示的内容是"不再正确或不再相关"，但和<del>有本质区别：<s>不代表文档被编辑修改过，只是陈述一个事实，这段内容现在没意义了。举几个典型场景：活动结束后的原价展示、已经过期的优惠券说明、不再适用的旧政策条款。这些内容并没有被"删除"，只是"过期"了。
很多人分不清<s>和<del>，其实判断标准很简单：问自己一个问题——这段文字的删除线是否代表一次"编辑行为"？如果是编辑行为，比如作者改了稿子、商家调了价格，用<del>；如果只是内容本身失效了，页面并没有被编辑，用<s>。举个例子，促销页面写着"原价599，现价299"，这里599并没有被删掉重写，它本来就一直是599，只是相对现价失去了意义，所以用<s>更贴切。
<p> <s>限时优惠：全场五折（活动已结束）</s> </p> <p>本次活动的优惠时段为6月1日至6月3日，目前已恢复原价。</p>
还要特别提醒一点：HTML5已经明确废弃了<strike>标签和<s>的旧用法。在HTML4时代，<strike>和早期的<s>都只是纯视觉的删除线，没有任何语义。HTML5重新定义了<s>的语义，而<strike>则彻底淘汰。虽然老浏览器仍然支持<strike>的渲染，但在新项目中绝对不要再使用它，否则通不过HTML5校验，也不利于页面的语义化建设。
用CSS实现删除线：text-decoration属性详解
如果只是想要删除线的视觉效果，不关心语义，那么CSS是更灵活的方案。核心属性是text-decoration，设置为line-through即可。这个方案最大的优势是可以和其他样式自由组合，随意控制颜色、粗细、位置，这是原生标签做不到的。
.strike {
text-decoration: line-through;
}
/* 自定义删除线颜色为红色，文字保持黑色 */
.price-old {
text-decoration: line-through red;
text-decoration-thickness: 2px;
}现代CSS还提供了几个细粒度属性：text-decoration-color控制线条颜色，text-decoration-thickness控制线条粗细，text-decoration-style可以设置实线、波浪线、虚线等样式。比如给过期内容加一条红色波浪删除线，视觉冲击力会比默认样式强很多，在审核类、批注类产品中很实用。这些属性目前主流浏览器都已有良好支持，但个别老版本浏览器可能需要加前缀，实际项目中建议做一下兼容测试。
还有一个实用技巧：当你用<del>或<s>标签实现了语义，但不喜欢浏览器默认的删除线样式时，完全可以保留标签、只用CSS覆盖样式。语义归语义，视觉归视觉，两者并不冲突。比如保持<del>的语义不变，但把线条颜色改成浅灰色、降低透明度，让被删除的内容看起来更"弱化"，这样的处理在价格对比场景中体验更好。
del {
text-decoration: line-through;
text-decoration-color: #bbb;
color: #999;
}实际开发中的选择建议与常见误区
选型上可以遵循一个简单的决策路径：内容代表一次修订记录，用<del>，需要的话配合<ins>；内容只是过期失效，用<s>；两者都不是，纯粹为了划掉某个词的视觉效果，用CSS的text-decoration: line-through。坚持这个原则，你的页面语义就是清晰的，对SEO和无障碍访问都有帮助。屏幕阅读器对<del>通常会有特殊处理，能提示用户这段内容已被删除。
常见的误区有两个。第一个是滥用删除线做装饰，比如把整段重要说明划掉再在旁边写小字，这种做法会让屏幕阅读器用户完全错过关键信息，搜索引擎也可能判定内容质量低。第二个误区是用删除线标签去实现分隔线或装饰线的效果，应该改用border、伪元素或者<hr>等更合适的方案。删除线标签的意义在于表达"此内容作废"，一旦偏离这个语义，就不要用标签，用CSS就好。
最后补充一个无障碍方面的细节：部分屏幕阅读器对<s>标签没有明显的语音提示，如果你的过期信息对用户决策很关键，建议在视觉删除线之外，额外加上文字说明，比如"已过期"、"已失效"等明确的文本标注，这样所有用户都能准确获取信息，不会因为只看到一条横线而误解页面内容。