该用 <p> 而不是 <div> 当内容是一段独立、可理解的文本，因 <p> 具备段落语义和默认间距，而 <div> 无语义，影响可访问性与SEO。
什么时候该用 <p> 而不是 <div>
语义错误是前端最常被忽视的“隐形 bug”——<div> 没有默认语义，搜索引擎、屏幕阅读器和浏览器都把它当“无意义容器”；<p> 明确表示一段独立的文本内容，自带上下外边距（margin）和段落语义。
实操建议：
- 只要内容是一段完整、可独立理解的文字（哪怕只有一句话），优先用
<p> - 避免用
<div>套文字再靠 CSS 模拟段落样式，这会破坏可访问性 - 连续多个
<p>之间默认有间距，若需紧贴排布，应显式重置margin，而不是换用<div>
<strong> 和 <em> 不只是加粗和斜体
它们表达的是语义强度差异：<strong> 表示内容具有强重要性（如警告、关键结论），屏幕阅读器通常会加重语气或放慢语速；<em> 表示强调（如反语、对比、微妙转折），读音会有语调变化。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用
<b>或<i>单纯为了视觉效果（比如品牌名加粗、术语斜体）——这是表现层逻辑，应交给 CSS 的font-weight和font-style - 嵌套使用时语义混乱，例如
<strong><em>绝不能</em>忽略</strong>是合理嵌套（先强调再加重），但反过来就容易让辅助技术困惑
<h1> 到 <h6> 的层级必须严格嵌套
标题标签不是“字体大小工具”，而是文档结构骨架。跳级（如 <h2> 后直接写 <h4>）或乱序（如页面中出现多个 <h1>）会破坏大纲解析，影响 SEO 和无障碍导航。
使用场景与建议：
- 每个 HTML 页面**最多一个**
<h1>（通常是主标题/页面核心主题） - 子章节用
<h2>，子子章节用<h3>，依此类推；不要为“看起来小一点”而降级用<h5> - 可用浏览器开发者工具的“Accessibility > Landmarks”或命令行工具
axe-cli快速验证标题层级是否连贯
用 <small> 标注附属信息，别用它做“小号字体”
<small> 的语义是“附属细则”，比如版权说明、免责声明、法律条款脚注。它不等于“字号小”，现代浏览器虽默认设了 font-size: small，但这个样式可以且应该被覆盖。
容易踩的坑：
- 把按钮里的次要文案（如“登录后查看”）包进
<small>——这不是附属信息，而是交互提示，更适合用<span class="hint">+ CSS 控制 - 在响应式设计中依赖
<small>实现移动端缩放，结果在高对比度模式下丢失语义，反而更难读 - 注意：HTML5 规范已明确
<small>**不适用于** 纯装饰性小字（如徽章、标签），这类应使用<span>
真正难的不是记住哪些标签存在，而是每次敲下 < 时，先问一句：“这段内容对机器和人分别意味着什么？”——语义一旦写错，后期靠 CSS 或 JS 弥补的成本，远高于写对第一行。
