div、section与article的具体技术差异是什么？

嘿，这个问题抓得很准——咱们直接绕开“什么时候用”的场景讨论，纯聊这三个标签在技术特性上的硬差异：

虽然三者都是默认display: block的块级元素，但浏览器的默认用户代理（UA）样式有细微不同：

• div：完全“干净”，没有任何预设的margin、padding或其他样式，除了块级元素的默认换行特性。
• section：部分现代浏览器（比如Chrome、Edge）会给它加上margin-block-start: 1em; margin-block-end: 1em;的默认上下外边距，不过这不是所有浏览器都统一，属于UA样式的差异。
• article：和div几乎完全一致，没有额外的预设样式，就是纯块级容器。

HTML5的文档大纲算法是浏览器用来解析页面结构的核心机制，这三个标签在其中的角色完全不同：

• div：完全不参与大纲生成，浏览器和爬虫只会把它当成一个无意义的容器，不会对页面的结构层级产生任何影响。
• section：会主动创建一个新的章节节点，纳入页面的结构大纲。如果section内部包含h1-h6标签，这些标题会自动成为该章节的层级标题，构建出嵌套的文档结构。
• article：同样参与大纲算法，但它的语义权重更高，表示这是一个独立的内容单元。在大纲中，article会被标记为一个可独立拆分的内容块，比如博客文章、评论卡片这类独立内容，浏览器会把它当成一个完整的结构单元处理。

对于屏幕阅读器等无障碍设备来说，三者的默认ARIA角色有本质区别：

• div：没有默认ARIA角色，除非手动设置role属性，否则无障碍设备只会把它识别为一个普通的“容器”，不会赋予任何特殊导航或识别逻辑。
• section：默认映射为ARIA的region角色，屏幕阅读器会把它标记为一个重要的页面区域，用户可以通过快捷键快速跳转到该区域，提升导航效率。
• article：默认映射为ARIA的article角色，无障碍设备会明确告知用户这是一个“独立的可阅读内容块”，比如在导航时会提示“文章区域”，帮助用户识别内容的独立性。

在浏览器开发者工具（比如Chrome的Elements面板）中，三者的标识不同：

• div：显示为普通的块级元素图标，没有特殊标记。
• section和article：会显示带有语义化的特殊图标（比如section是带章节符号的方块，article是文档样式的图标），方便开发者快速识别页面的结构层级。

另外，从DOM API的角度来说，三者都支持所有标准的DOM操作（比如appendChild、querySelector等），没有API层面的差异，但在涉及页面结构解析的API中，section和article会被纳入结构分析，而div不会。

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