、–、、、五标签覆盖90%文本语义需求；误用替代是seo与可访问性最常被忽略的硬伤。
直接说结论：<p></p>、<h1></h1>–<h6></h6>、<strong></strong>、<em></em>、<span></span> 这五个标签覆盖了 90% 的日常文本结构和语义表达需求；用错 <b></b> 和 <i></i> 而不是 <strong></strong> 和 <em></em>，是 SEO 和可访问性最常被忽略的硬伤。
什么时候该用 <p></p>，而不是 <div> 或 <code><br>
<p></p> 是语义化段落容器，不是“换行工具”。它自带上下 margin，浏览器默认会把它当作一个逻辑完整的文本单元处理——这对屏幕阅读器、搜索引擎抓取、打印样式都关键。
- ✅ 正确场景：一段有完整意思的叙述性文字，比如新闻正文、产品描述、用户协议条款
- ❌ 错误做法：用多个
<p></p>模拟列表项（该用<ul></ul>+<li>）；或只为了“空一行”就写<p></p> - ⚠️ 注意：
<br>只用于段落内部强制换行（如诗歌、地址），不能替代<p></p>。混用会导致语义断裂，CSS 重置 margin 时也容易出错
<h1></h1> 到 <h6></h6> 的层级陷阱
标题不是“字号调节器”，而是文档大纲骨架。搜索引擎和辅助技术（如读屏软件）严格依赖这个层级判断内容主次。
- ✅ 必须遵守顺序：从
<h1></h1>开始，之后只能是<h2></h2>或继续<h1></h1>（极少见），跳级如<h1></h1>→<h3></h3>会被视为结构缺陷 - ✅ 一个页面通常只有一个
<h1></h1>（代表页面主题），<h2></h2>对应主要章节，<h3></h3>是子模块 —— 不是“谁字体大就用谁” - ⚠️ 常见坑：CMS 系统自动生成的标题嵌套混乱；用 CSS 把
<h3></h3>样式调得比<h2></h2>还大，但语义层级没变，反而误导解析
<strong></strong> 和 <em></em> 为什么不能用 <b></b> 和 <i></i> 替代
视觉效果相似，但语义完全不同。<strong></strong> 表示内容重要性提升（如警告、关键参数），<em></em> 表示语气强调（如反语、重点词）；而 <b></b> 和 <i></i> 仅表示“加粗”“斜体”这种纯样式意图，无语义权重。
- ✅ 推荐写法：
<p>请务必在<strong>24 小时内</strong>完成验证</p>（强调时效性）；<p>他“很专业”</p>中引号部分用<em></em>包裹，表达反讽 - ❌ 避免：
<b>优惠价</b>—— 价格本身不天然重要，除非是对比强调（此时应结合上下文用<strong></strong>） - ⚠️ 影响：W3C 校验器会警告；Google 搜索结果摘要可能忽略
<b></b>内容；读屏软件对<strong></strong>会加重语音，对<b></b>则无特殊处理
<span></span> 的定位和边界
<span></span> 是纯行内容器，没有语义，只用于需要 CSS 或 JS 控制的局部文本片段。它不该成为“语义兜底方案”。
- ✅ 合理使用：给电话号码加点击拨号行为
<span class="tel">138-0013-8000</span>；高亮搜索关键词<span class="highlight">HTML</span> - ❌ 滥用信号：用
<span></span>包裹整段说明文字来代替<p></p>；或为了加粗某词而不用<strong></strong>改用<span style="font-weight:bold"></span> - ⚠️ 风险：过度依赖
<span></span>会让 HTML 失去结构信息，后期维护时无法通过标签快速识别内容类型；也增加 CSS 选择器复杂度（比如要区分“段落内的 span”和“导航里的 span”）
真正难的不是记住标签名，而是每次敲下 时，先问一句：“这段文字在逻辑上属于什么？”——是标题？段落？强调？还是纯粹需要样式钩子？语义一旦错位，后续所有样式、SEO、无障碍适配都会打折扣。
