article 表示可独立分发或复用的自包含内容单元，如博客、新闻；section 仅为依赖上下文的主题分组，如“产品特性”。必须用 article 的情形包括：含作者与时间且需 RSS 抓取、同一页面多条同类独立内容、会被第三方聚合、使用 header+h1+footer 描述本体。
article 和 section 的语义边界在哪
关键看内容是否「可独立分发或复用」。article 表示一个自包含、可单独存在、能脱离上下文被引用或重用的内容单元，比如一篇博客、一条新闻、一个用户评论；section 只是文档中一个主题性的分组，依赖上下文才有完整意义，比如「产品特性」「客户评价」这类页面内的逻辑区块。
什么时候必须用 article 而不是 section
以下情况应优先选 article：
- 内容有明确作者、发布时间（如
<time datetime="2024-03-15">），且可能被 RSS 抓取或单独分享 - 同一页面内有多条同类独立内容（如博客列表页中每篇博文都该是
<article>） - 内容会被第三方聚合（如嵌入到聚合平台、邮件简报、PWA 离线缓存中）
- 使用了
<header>+<h1>+<footer>组合，且该组合描述的是本体而非父容器
section 常见误用场景
开发者常把「视觉上有边框/背景的区域」直接套 section，这是错的。它不解决样式问题，只表达结构关系。容易踩的坑包括：
- 仅因 CSS 需要加 class 就用
section包裹 —— 应改用<div>或语义更准的标签（如aside、nav） - 在
article内部又用section包裹标题+段落，但没提供新主题层级 —— 此时用<header>或直接用 heading 更合适 -
section没配<h2>～<h6>标题 —— 它本身不自带语义标题，缺标题就失去「主题分组」意义
嵌套规则与实际写法示例
article 可以包含 section（如一篇教程里分「准备」「实操」「排错」几节），但 section 不该包裹多个无关联的 article —— 那该用 <main> 或 <div> 作为容器。
立即学习“前端免费学习笔记（深入）”；
<main>
<article>
<header>
<h1>如何调试 fetch 请求</h1>
<time datetime="2024-03-15">2024年3月15日</time>
</header>
<section>
<h2>常见错误码</h2>
<p>401 表示未认证…</p>
</section>
<section>
<h2>浏览器 DevTools 技巧</h2>
<p>Network 标签页过滤 XHR…</p>
</section>
</article>
</main>
真正难判断的，往往不是单个标签用法，而是整页信息架构是否支持这种嵌套 —— 如果你不确定某个区块该用 section 还是 article，先问自己：它摘出来发到 Twitter 或转发给同事，别人能不能看懂？不能，就不是 article。
