首先要澄清一个常见误区：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 层级是变深了，但语义却更加模糊——屏幕阅读器在播报时，反而更难定位到内容的重点。
