HTML语义化标签需精准匹配意图：<strong>表重要性，<b>仅视觉加粗；<del>表删除保留痕迹，<s>表内容失效；<u>已弃用应改用CSS或<ins>；<mark>表上下文相关性，非强调；嵌套过深会破坏语义解析。
HTML格式化标签不是“能用就行”，关键在语义是否准确、浏览器行为是否可控、后续维护是否省力。用错一个<u>或<s>，可能让屏幕阅读器误读，也可能被CSS全局下划线规则意外覆盖。
什么时候该用 <strong> 而不是 <b>
两者都加粗，但语义完全不同：<strong> 表示内容有重要性（如警告、必填项提示），会被屏幕阅读器加重语气朗读；<b> 仅表示视觉加粗，无语义权重（比如人名、产品名需要突出但不强调其重要性）。
- 表单错误提示用
<strong>请输入有效邮箱</strong>—— 屏幕阅读器会停顿并重读 - 商品列表中品牌名用
<b>Apple</b> Watch Ultra—— 纯样式，不改变语义流 - 如果项目已用 CSS 统一设置了
b { font-weight: 600; }，再用<b>就容易和设计意图冲突
<del> 和 <s> 的实际差异在哪
<del> 表示文本被删除但保留在文档中（如编辑痕迹、法律条文修订），语义明确；<s> 表示内容不再准确或不适用（如过期价格、失效优惠），更偏向“废弃”含义。现代浏览器对二者渲染一致，但辅助技术会区别对待。
- 合同修订稿用
<del>¥599</del> ¥499—— 明确保留删除痕迹 - 电商页面标原价用
<s>¥1299</s> ¥999—— 暗示旧价已失效，非编辑过程 - 搜索引擎和无障碍工具会把
<del>当作可访问的变更记录，而<s>可能被忽略或降权
为什么 <u> 在 HTML5 中被弃用却还在用
根本原因是历史惯性 + 短平快需求，但风险明确：<u> 会和链接样式冲突（用户可能误点），且默认下划线在深色背景上几乎不可见。HTML5 推荐用 <ins>（插入）或 CSS text-decoration: underline 替代。
立即学习“前端免费学习笔记（深入）”；
- 拼写检查高亮应优先用
<u class="spelling-error">recieve</u>+ CSS 控制颜色/虚线，而非裸<u> - 中文专有名词标注（如人名、地名）用
<u>是妥协方案，但必须配role="note"提升可访问性 - 某些 CMS 或 Markdown 渲染器仍输出
<u>，上线前建议用 DOM 检查工具批量替换为带 class 的<span>
<mark> 不只是“高亮黄色背景”
<mark> 的本意是标记文档中“与当前上下文相关”的内容，比如搜索关键词、引用片段、重点结论。它默认黄色背景只是 UA 样式，真正价值在于语义可检索、可样式隔离。
- 搜索结果页用
<p>本文讨论了<mark>HTML5</mark>的语义化改进</p>—— JS 可轻松提取所有<mark>内容生成摘要 - 配合 CSS
mark { background-color: #ffeb3b; color: #212121; }能避免默认黄色在浅黄背景上消失 - 不要用
<mark>替代<strong>做强调，它不传递重要性，只表示“相关性”
最容易被忽略的是：所有这些标签一旦嵌套过深（比如 <strong><mark><del>），就会让语义层叠混乱，辅助技术和 SEO 解析器可能放弃理解。保持单层语义、用 class 控制复合样式，才是长期可维护的做法。
