HTML5中article与section嵌套的机器语义识别差异问题

两种嵌套结构存在明确的、可被机器识别的语义差异，所有遵循W3C HTML5标准的解析端（主流浏览器、Google搜索爬虫、屏幕阅读器等辅助技术）均会按照标准定义的规则处理两种结构，不存在解析歧义。

核心判定依据 #

规则来自W3C HTML5官方标准对两个元素的原生语义定义，所有合规解析端必须按该定义实现语义识别：

• <article>：代表文档、页面或应用中独立、可完整分发/复用的自包含内容单元，典型场景包括单篇博客、一条新闻评论、一个独立商品卡片、一条用户发帖，脱离所在页面的其他上下文也能独立成立。
• <section>：代表文档中按主题划分的通用内容分组区块，通常自带标题，用于对关联内容做主题分块，本身不要求内容具备独立可复用属性。

Google搜索官方发布的爬虫解析指南、主流浏览器的页面大纲生成算法、屏幕阅读器的内容导航逻辑，均完全遵循上述语义定义处理嵌套关系。

两种结构的具体解析差异 #

1. 识别差异存在性 #

合规解析端对article > section和section > article两种结构的语义归属判定存在明确差异，不会将两种结构识别为等价语义。

2. 具体影响逻辑 #

（1）article > section结构（<section>嵌套在<article>内部）

解析端判定逻辑：外层<article>是独立的自包含内容主体，内层的多个<section>是这篇独立内容内部的主题分章节，所有内层section的内容语义上完全从属于外层的单篇article，不具备独立分发属性。
典型场景：外层为一篇完整的技术博客，内层三个section分别对应博客的「问题背景」「实现方案」「总结」三个章节，解析端会将三个section的内容全部归属于这篇博客，不会把单个section识别为可独立提取的内容单元。
对应代码示例：

<article>
  <section><p></p></section>
  <section><p></p></section>
  <section><p></p></section>
</article>

结构参考截图：

• Article嵌套Section结构示例1
• Article嵌套Section结构示例2

（2）section > article结构（<article>嵌套在<section>内部）

解析端判定逻辑：外层<section>是一个同主题的内容分组容器，内层的多个<article>是归属于该主题分组下的多个互相独立的自包含内容单元，每个内层article都具备独立分发/复用属性，语义上不从属于其他同级article。
典型场景：外层为「本周热门游戏」主题内容区块，内层三个article分别对应三个独立的游戏介绍卡片，解析端会识别到这是一个主题板块下的三个独立内容，每篇article都可以单独被提取、分发，不需要依赖同板块下的其他内容即可成立。
对应代码示例：

<section>
  <article><p></p></article>
  <article><p></p></article>
  <article><p></p></article>
</section>

结构参考截图：

• Section嵌套Article结构示例1
• Section嵌套Article结构示例2

内容的提问来源于stack exchange，提问作者Sam