先记住这个答案
<article> 表示可独立分发或复用的自包含内容，如博客文章、评论、产品卡片；<section> 是通用文档分区，强调主题分组，通常需标题。决定时先问：内容脱离上下文是否依然完整有意义？若是，用 <article>；否则若确实需要语义分区，用 <section>。段落和侧栏不是 <section>，div 才用于无语义包装。
- 独立可聚合内容选 article
- 主题分组单元用 section
- 普通无语义容器用 div
内容模型与大纲贡献机制
<article> 属于 sectioning content，会在大纲中创建独立分区，且其内容被定义为可独立分发，例如在 RSS 中重新输出。不管内部是否再分节，<article> 自身是聚合单元。因此文章里的评论可作为嵌套 <article>，每条评论都能脱离文章单独呈现。
<section> 同样归为 sectioning content，但它的语义是文档的一个主题分区，通常需要标题来描述该分区内容。若一个区域只是样式容器，内部没有明确标题或不构成大纲中可单独识别的部分，使用 <section> 会制造没有标题的分区，对辅助技术并不友好，应改用 <div>。
构建包含用户评论的新闻文章页
假设页面包含一篇新闻报道，下方有用户评论。报道主体可单独转载，应放入 <article>；每条评论独立于其他评论，它们可各自作为 <article>，而评论列表用 <section> 加上“用户评论”标题来分组。产品卡片和独立的小工具也能作为 <article>。
处理时先判断内容是否能脱离页面上下文。新闻里的“相关报道”区域虽然主题相关，但拆开便失去上下文，不适合 <article>，宜用 <aside> 或 <section>。若评论本身没有外部引用价值，也可直接用 <section> 包裹，但 <article> 更贴合评论的独立可聚合属性。
边界条件：无标题与嵌套规则
当 <section> 没有可感知的标题时，其语义价值接近普通分区，往往不如 <div> 加 aria-label 清晰。若内容同时是独立主题，可以用 <article>，并且 <article> 不强制要求内部标题，但规范建议在可见标题辅助识别。不要仅因为视觉卡片就采用 <article>，还要确认内容可独立分发。
<article> 不能嵌套在 <address> 等特殊祖先内，而 <section> 是通用分区组件。屏幕阅读器的导航可能会遍历 sectioning 元素，滥用会制造额外的大纲节点。正确做法是在没有明确候选项（如 article、aside、nav）时，才使用 <section>，且通常应配标题；否则用 div。
容易答错的地方
- 把样式容器看作 section
- 有人为圆角边框的背景块随意套 <section>，即使内部无主题标题。这会生成无用的大纲节点，干扰文档结构。正确做法：section 更适用于有标题的主题分区；若是无语义包装，应使用 div。
- 认为每个卡片都该是 article
- 产品列表中的每个卡片若含有可独立使用的完整信息，可以是 article，例如“操作价格已包含税费”这类上下文补充却属于页面整体，不具有独立性。判断标准是能否单独出现在其他应用或订阅源中依然成立。
面试官还会怎么问？
页面中能多次使用 article 和 section 吗？
可以。每个 article 是一个独立单元，正文和评论可分别作为 article；section 也允许多次用于不同主题分区。关键在于命名和标题层次清晰，让用户能通过标题导航到对应区域。
section 一定需要包含标题吗？
按 HTML 规范建议，section 应包含标题，以表示其内容主题。若一个区域没有可显示标题且只是结构性分组，使用 div 更合适，可以避免生成未命名分区。
article 与 main、article 元素在无障碍上有什么不同
main 每页一个代表主要内容区域，而 article 是独立可分发组件。两者可共存：新闻页可将主要报道放 main 中的 article 内。article 会被映射到 role="article"，辅助技术可按内容单元导航。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。