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