首先需要澄清一个常见误解：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，而应优先使用更专用的 nav、footer、aside 等标签。强行套用 section 属于语义退化。
• 在整个页面最外层包裹
  → HTML5并无所谓的「页面根区块」概念，这样做纯属冗余，使用 main 标签或直接留空是更准确的做法。

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