应优先使用语义化标签：表强重要性（如错误提示），仅作纯样式；用于上下文相关标记（如搜索关键词），非装饰高亮；专指附属细则（如版权），/限化学式、数学公式等语义场景。
<strong></strong> 和 <em></em> 是语义正确的加粗与斜体写法，不是视觉样式开关；<b></b> 和 <i></i> 仅保留纯样式意图，现代项目中应慎用。
什么时候该用 <strong></strong> 而不是 <b></b>
浏览器渲染效果可能一样，但语义完全不同：<strong></strong> 表示内容有强重要性（如警告、关键参数），会被屏幕阅读器加重语气读出；<b></b> 只是“想让它看起来粗一点”，没有语义权重。
- 表单错误提示用
<strong></strong>：「<strong>邮箱格式不正确</strong>」 - 品牌名偶尔加粗（无强调意图）可用
<b></b>：「欢迎来到<b>Lobster AI</b>」 - SEO 和无障碍工具（如 NVDA）会忽略
<b></b>的语义，但识别<strong></strong>
<mark></mark> 不是高亮背景色的快捷方式
<mark></mark> 的本意是“标记出与当前上下文相关的内容”，比如搜索结果中匹配的关键词、文档修订时新增的文字。它默认带黄色背景，但不能滥用为通用高亮装饰。
- 正确场景：用户搜索“HTML5”，结果页中所有出现的 “HTML5” 包在
<mark></mark>里 - 错误场景：用
<mark></mark>给按钮文字上色，或替代 CSS 的background-color - 若需自定义样式，必须重置
mark的默认background-color和color，否则在深色模式下可能不可读
<small></small> 和 <sub></sub>/<sup></sup> 的实际用途常被误解
<small></small> 在 HTML5 中明确用于“附属细则”，比如版权信息、免责声明、法律条款脚注——不是“随便缩小字体”的工具。而 <sub></sub> 和 <sup></sup> 专用于化学式（H2O）、数学公式（x2）等有明确排版语义的场景。
- 页脚版权行适合：
<p class="footer">© 2026 Lobster AI. <small>All rights reserved.</small></p> - 避免：
<small>点击此处查看详情</small>—— 这属于 UI 控制，应由 CSS 控制尺寸 -
<sub></sub>和<sup></sup>不支持嵌套，也不该用来做“上标图标”或“角标徽章”
真正容易被跳过的细节是：所有这些标签都依赖上下文语义生效。脱离文档结构单独使用，比如在 <div> 里堆砌 <code><mark></mark> 和 <small></small>，既削弱可访问性，也增加后期维护成本。
