S标签用于表示已过时或不准确的内容，电商中常标记原价并加删除线，语义上区别于del标签；应添加aria-label增强可访问性，并通过CSS微调样式确保视觉清晰。

S 标签 在 HTML5 中用于表示被删除或不再准确的内容，常用来展示原价（即打折前的价格），配合普通文本显示现价，从而实现清晰的价格对比效果。它语义明确、轻量简洁，是电商网站中标注划掉原价的标准做法。

正确使用 S 标签标记原价

将打折前的价格用 <s></s> 包裹，现价用普通 <span></span> 或直接文本显示，浏览器默认会为 <s></s> 内容添加删除线样式：

<p>
  <s>¥299</s> 
  <span style="color: #e63946; font-weight: bold;">¥199</span>
</p>

这样语义清晰：S 标签表明“¥299 已不适用”，现价 ¥199 是当前有效价格。

避免与 del 标签混淆

<s></s> 和 <del></del> 都渲染为删除线，但语义不同：

立即学习“前端免费学习笔记（深入）”；

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• <s></s> 表示内容**已过时、不推荐或不准确**（如原价、旧配置），适合价格对比场景
• <del></del> 表示内容**已被移除或编辑删除**，带有时间性（常配合 datetime 属性），更适合文档修订

电商页面中推荐统一用 <s></s>，更贴合“价格已调整”的业务含义。

增强可访问性与SEO的小技巧

仅靠视觉删除线不够，建议补充语义信息：

• 为 <s></s> 添加 aria-label="原价：¥299"，方便读屏软件识别
• 在价格旁用 <span aria-hidden="true">节省 ¥100</span> 显示差价，再配 sr-only 类隐藏文字供屏幕阅读器读出
• 确保现价字体更大、颜色更醒目（如红色加粗），形成视觉主次

响应式与样式微调建议

默认删除线位置可能偏高，可通过 CSS 微调对齐：

 s {
  text-decoration: line-through;
  text-decoration-thickness: 1.2px;
  text-decoration-color: #999;
  vertical-align: middle;
}

在小屏设备上，可让原价字号略小于现价（如原价 14px，现价 18px），避免拥挤；也可用 display: inline-flex 对齐基线，提升排版一致性。