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