首先要澄清一个常见误区：Section 和 Article 在视觉呈现上没有任何差异。两者默认均无自带样式，不会影响页面的 CSS 盒模型、Flex 或 Grid 布局。无论使用哪个标签，margin、padding、宽高都不会改变。真正让它们在价值上迥然不同的，是背后承载的语义含义。

为什么浏览器渲染结果一致，但 SEO 和读屏器的表现却天差地别

搜索引擎和辅助技术（如屏幕阅读器）并非仅依赖 DOM 结构。它们会主动解析 article 和 section 的语义层级，并据此采取截然不同的处理方式：

• article 被 Google 明确视为「独立的内容单元」。众多 RSS 解析器默认只抓取 article 内的内容，而直接忽略 section。
• 浏览器的阅读模式（如 Safari Reader、Firefox Reader View）提取内容时，会优先锁定 article；对于 section，则可能跳过或降低权重处理。
• 根据 WCAG（网页内容无障碍指南）要求，每个 article 最好拥有自己的标题（

  –

  ）；section 虽不强制，但缺少标题会大大削弱其语义价值。

• 一个典型错误是：将产品列表项写成
  。这会导致每条产品信息无法被搜索引擎单独识别和索引；正确的做法应使用

  。

哪些场景必须使用 article，换成 section 就会损失 SEO 权重

判断标准其实非常直观：这段内容能否脱离当前页面，单独作为一篇完整的文章被理解？例如，它能否独立发布到 RSS 订阅、被爬虫当作一个完整的页面收录，或者复制到其他地方后，读者依然能看懂其完整含义？如果答案是肯定的，那就应该毫不犹豫地使用 article。

• 博客正文、新闻稿件、论坛的主帖 → 必须使用 article，否则 Google 可能不会将其视为独立页面进行索引。
• 用户评论（包含作者名、时间戳和评论正文） → 每一条评论都应是一个 article，而非 section 或 div。
• 电商首页的「热销商品」卡片 → 如果每张卡片都包含图片、标题、价格和简短描述，并且设计上支持被弹窗或侧边栏单独复用展示，那么它就应该是一个 article。
• 反观一个错误案例：
  #前端
  给一个简单的标签列表套上 section —— 标签本身并非独立的内容单元，完全不适用。

section 不是“次级 article”，而是逻辑分组容器

section 的核心价值不在于争夺 SEO 主权重，而在于提供清晰的结构信号。它告诉机器：“这一块内容主题一致，但它们共同依赖于更大的上下文。” 滥用或错位使用，反而会稀释页面的主干逻辑。

• 博客文章内部的「项目背景」、「实现步骤」、「踩坑记录」等小节 → 各自使用 section 是合理的分组；如果写成 article，反而会割裂文章的整体性。
• 首页的「关于我们」、「服务流程」、「客户案例」等模块 → 各自使用 section 是合适的，因为它们共同构成整个页面的叙事，单独拆出来意义不完整。
• 导航栏、页脚、侧边栏 → 这些区域不应使用 section，而应优先使用更专用的 na v、footer、aside 等标签。强行套用 section 属于语义上的退化。
• 在整个页面最外层包裹一个
  → HTML5 并没有所谓的「页面根区块」概念，这样做纯属冗余，使用 main 标签或直接留空是更准确的做法。

这里有一个容易被忽略的细节：嵌套本身并不会直接提升 SEO。但如果嵌套的方向错了，反而会破坏文档的大纲结构。例如，在一个 article 里面嵌套一个既没有标题、也没有明确主题的 section，DOM 层级是变深了，但语义却更加模糊——屏幕阅读器在播报时，反而更难定位到内容的重点。