HTML格式化标签的核心是语义表达而非样式控制：<strong>表强重要性，<b>仅引注意；<em>表语音重读，<i>表语境差异；<u>专用于非文本标注；嵌套须合规，避免语义重复或混淆。
HTML格式化标签不是“怎么加粗斜体”的问题，而是“该用哪个语义标签表达什么意图”的判断题。 乱用 和 是新手最常踩的坑，但真正卡住进度的，往往是改完代码后发现屏幕阅读器读不出重点、SEO 工具报语义缺失、或者团队 Code Review 直接打回重写。
什么时候该用 <strong> 而不是 <b>
两者都显示为粗体，但浏览器和辅助技术处理方式完全不同：<strong> 表示内容有强重要性（比如错误警告、法律条款关键句），屏幕阅读器会加重语气；<b> 只是“引起注意”，没有语义权重（比如关键词高亮、产品名强调）。
- 用户输入密码错误时提示：
<strong>密码长度至少8位</strong>✅ - 文章中突出品牌名：
<b>Lobster AI</b> 推出新功能✅ - 把所有标题都套
<b>来模拟<h2>效果 ❌——这破坏文档结构，影响 SEO 和导航 - 用
<strong>包裹整段说明文字 ❌——语义过载，反而稀释重点
<em> 和 <i> 的区别比你想的更具体
<em> 表示语音重读，对应说话时抬高音调的部分；<i> 表示语境差异，比如外语词、术语、船名、思想活动。它们不是“斜体二选一”，而是用途互斥。
- “你真的确定要删除？”——
<em>套“真的” ✅ - 《Anna Karenina》中的道德困境 ——书名用
<i>✅ - 化学式 H2O 中的 “2” 必须用
<sub>，不能用<i>或 CSS 模拟 ❌ - 用
<em>包裹整句引文 ❌——应该用<blockquote>，<em>是修饰词，不是容器
别碰 <u>，除非你清楚它现在的语义
HTML5 彻底重定义了 <u>：它不再表示“下划线样式”，而是非文本标注，比如拼写错误、中文专名号、校对标记。默认样式仍是下划线，但这是巧合，不是目的。
立即学习“前端免费学习笔记（深入）”；
- 显示错别字标注：
<u>苹国</u>（应为“苹果”） ✅ - 给链接加下划线：用 CSS
text-decoration: underline，不是<u>❌ - 用
<u>实现按钮文字下划线效果 ❌——CSS 控制样式，HTML 只管语义 - 在可访问性要求高的场景（如政府网站）滥用
<u>，会被 axe 或 WAVE 工具直接标为严重问题
格式化标签嵌套有硬限制
不是所有组合都合法。W3C 明确禁止某些嵌套，比如 <strong> 里再套 <strong>（语义重复），或 <sub> 外层用 <i>（混淆层级）。浏览器可能渲染出来，但验证器会报错，React/Vue 等框架在 SSR 阶段也可能拒绝解析。
- 正确嵌套：
<p>水分子是<sub>H</sub><sub>2</sub><sub>O</sub>，其中<em>2</em>是下标</p> - 错误嵌套：
<strong>价格<strong>¥199</strong></strong>—— 应该用一层<strong>+ CSS 类控制样式范围 - 避免跨块级元素嵌套：
<p><strong>第一行</strong><br><strong>第二行</strong></p>——<br>不是语义分隔符，该用两个<p>或 CSS
真正难的不是记住每个标签怎么写，而是每次敲下 < 时，先问一句：“这个视觉效果背后，我想传达什么信息？谁会消费它？机器怎么理解它？” 标签选错，后面补 Accessibility、SEO、国际化全是硬伤。
