应优先使用语义化标签（如、、<ins>、）替代纯样式标签（如、、<u>、<s>），以提升可访问性、SEO和可维护性；表强重要性，仅表视觉加粗；表语气强调，表特定文本类型；<u>和<s>需谨慎使用，避免交互混淆；嵌套须合规，闭合须完整。
直接结论：用语义化格式化标签（如 <strong>、<em>、<ins>、<del>）替代纯样式标签（如 <b>、<i>、<u>、<s>），能同时提升可访问性、SEO 效果和后期维护效率——不是“能不能用”，而是“为什么不该只图省事用 <b>”。
什么时候该用 <strong> 而不是 <b>
核心区别不在视觉效果（两者默认都加粗），而在浏览器、屏幕阅读器和搜索引擎如何理解这段文本。
-
<strong>表示内容具有强重要性，会被屏幕阅读器加重语气读出，Google 也会轻微加权该文本的语义权重 -
<b>仅表示“想让它看起来粗一点”，无语义，对辅助技术和 SEO 零贡献 - 常见误用场景：用
<b>标注商品标题、错误提示、操作按钮文案——这些其实都隐含“需要用户立刻注意”，应改用<strong> - 例外情况：品牌名中固有粗体（如 “IBM” 字母本身设计含粗细对比）、纯装饰性加粗（如海报式 banner 文案），可用
<b>，但需搭配aria-hidden="true"避免干扰读屏
<em> 和 <i> 的分工很明确
别再凭感觉选。它们的语义边界在 HTML5 规范里写得很清楚。
-
<em>= 强调语气，比如 “你真的确定要删除吗？” 中的 “真的” —— 屏幕阅读器会改变语调，CSS 可单独重置为斜体或颜色高亮 -
<i>= 表示特定类型文本，包括：外语词（<i>bonjour</i>）、技术术语（<i>DOM</i>）、船名（<i>Titanic</i>）、书籍/电影标题（<i>Inception</i>） - 错误示范：
<i>警告：系统即将重启</i>—— 这是语气强调，不是术语，该用<em>；若写成<em>系统即将重启</em>却没包裹完整警告句，语义就断了
带下划线和删除线的标签容易引发交互混淆
<u> 和 <s> 在现代网页中风险很高，必须谨慎使用。
立即学习“前端免费学习笔记（深入）”；
-
<u>默认样式和超链接几乎一样，用户极易误点；HTML5 明确建议：仅用于拼写纠错（<u><span>recieve</span></u>）或法律文书中的手写签名线，且必须配合style="text-decoration: underline wavy red;"做视觉区分 -
<del>是语义正确的删除线（如价格变更：<del>¥299</del> <ins>¥199</ins>），而<s>仅表示“不再准确/不推荐”，比如过时功能说明：“<s>支持 IE8</s> 已弃用”</li> <li>绝对避免：<code><u>点击这里</u>
或<s>立即购买</s>—— 用户会困惑这是不能点，还是点了没反应
格式化标签嵌套时的顺序和限制
多个格式化标签可以嵌套，但顺序错乱或过度嵌套会破坏语义连贯性，甚至被部分读屏工具跳过。
- 推荐嵌套深度 ≤ 2 层，例如：
<strong>库存<em>仅剩3件</em></strong>（重要性 + 强调） - 禁止交叉嵌套：
<strong>A <em>B </strong> C</em>是无效 HTML，解析结果不可控 -
<ins>和<del>不应包裹块级元素（如<p>、<div>），只作用于文本片段；整段删除请用 CSSdisplay: none+ 注释说明 - 所有格式化标签都应保持闭合，尤其在模板引擎中动态插入时，漏掉
</em>会导致后续整页斜体——这种 bug 很难定位
真正影响体验的，往往不是“用了什么标签”，而是“为什么用这个而不是那个”。语义不是教条，是让机器和人都少猜一次的沟通契约。一旦开始写 <strong>，就得问一句：这段文字，是不是真值得被大声读出来？
