应使用<article>当内容能独立存在、分发和复用，如博客正文、新闻、评论；<section>仅用于页面内逻辑区块。嵌套<article>需体现真实内容包含关系，且每个<article>必须含标题元素（如<h1>）以确保语义完整和SEO识别。
什么时候该用 <article> 而不是 <section>
判断标准很简单：<article> 必须能独立存在、独立分发、独立复用。比如一篇博客正文、一条新闻、一个用户评论、一个微博卡片——复制粘贴到另一个网站，它自己仍然语义完整、逻辑自洽。<section> 则只是文档内部的一个“区块”，脱离上下文就失去意义，比如“产品特性”“客户评价”这类页面内组织单元。
常见误用：把整个首页用一个 <article> 包起来，或者把导航栏、侧边栏也塞进去。这些都不是独立内容，不该用 <article>。
<article> 可以嵌套，但嵌套有明确语义
嵌套是合法且常见的，但必须反映真实的“内容包含关系”。例如：一篇博客（外层 <article>）里嵌套几条读者评论（每个评论都是独立的 <article>），因为每条评论本身可被单独引用、转发或 RSS 订阅。
不推荐嵌套的情况：
立即学习“前端免费学习笔记（深入）”；
- 把多个新闻标题+摘要硬塞进一个
<article>里再各自用<article>包 —— 这属于结构错乱，应该用<section>+ 多个顶层<article> - 在
<article>里嵌套广告位、推荐栏等非核心内容块 —— 它们不属于该文章的“独立内容”，应放在外部或用<aside>
标题层级与 <article> 的配合要点
<article> 内部的标题（<h1>–<h6>）默认按文档大纲重新计数。也就是说，你可以在每个 <article> 里放心用 <h1> 作为主标题，浏览器和读屏器会把它理解为“这篇文章的标题”，而不是整页的最高标题。
但要注意：
- 不要为了“视觉样式”强行降级标题（比如全用
<h3>），语义优先 - 如果某
<article>确实没有标题，至少加一个<header>或用<h2>占位并aria-label补充说明 - 嵌套的
<article>中，子标题仍应遵循内容逻辑，比如评论里的回复可用<h3>，但不宜跳回<h1>
RSS、爬虫和 SEO 对 <article> 的实际识别方式
主流 RSS 解析器（如 Feedly）、搜索引擎（Google）、无障碍工具主要依赖两个信号来识别独立内容：<article> 标签 + 内部存在 <header> 或明确标题元素（<h1>–<h6>）。光有 <article> 不够，没标题的 <article> 很可能被忽略或降权。
实操建议：
- 确保每个
<article>至少含一个标题级元素（哪怕只是<h2 class="sr-only">评论</h2>） - 避免在
<article>外再套一层无语义的<div>，这会干扰大纲解析 - 使用 W3C HTML Validator 检查 outline，确认
<article>是否被正确识别为独立节
<article>
<header>
<h1>如何正确使用 article 标签</h1>
<p class="meta">发布于 2024-04-15</p>
</header>
<p>这篇文章解释了…</p>
<section>
<h2>嵌套规则</h2>
<p>子 article 应代表真正独立的内容…</p>
</section>
</article>
真正容易被忽略的，是标题缺失导致的语义断裂——很多开发者只顾结构套用，忘了 <article> 不是“样式容器”，而是“可抽取单元”。没有标题，它就只是个带标签的 <div>。
