article 表示可独立分发或复用的自包含内容单元，如博客、新闻；section 仅为依赖上下文的主题分组，如“产品特性”。必须用 article 的情形包括：含作者与时间且需 RSS 抓取、同一页面多条同类独立内容、会被第三方聚合、使用 header+h1+footer 描述本体。
article 和 section 的语义边界在哪
关键看内容是否「可独立分发或复用」。article 表示一个自包含、可单独存在、能脱离上下文被引用或重用的内容单元，比如一篇博客、一条新闻、一个用户评论；section 只是文档中一个主题性的分组，依赖上下文才有完整意义，比如「产品特性」「客户评价」这类页面内的逻辑区块。
什么时候必须用 article 而不是 section
以下情况应优先选 article：
- 内容有明确作者、发布时间（如
<time datetime="2024-03-15"></time>），且可能被 RSS 抓取或单独分享 - 同一页面内有多条同类独立内容（如博客列表页中每篇博文都该是
<article></article>） - 内容会被第三方聚合（如嵌入到聚合平台、邮件简报、PWA 离线缓存中）
- 使用了
<header></header>+<h1></h1>+<footer></footer>组合，且该组合描述的是本体而非父容器
section 常见误用场景
开发者常把「视觉上有边框/背景的区域」直接套 section，这是错的。它不解决样式问题，只表达结构关系。容易踩的坑包括：
- 仅因 CSS 需要加 class 就用
section包裹 —— 应改用<div> 或语义更准的标签（如 <code>aside、nav） - 在
article内部又用section包裹标题+段落，但没提供新主题层级 —— 此时用<header></header>或直接用 heading 更合适 -
section没配<h2></h2>～<h6></h6>标题 —— 它本身不自带语义标题，缺标题就失去「主题分组」意义
嵌套规则与实际写法示例
article 可以包含 section（如一篇教程里分「准备」「实操」「排错」几节），但 section 不该包裹多个无关联的 article —— 那该用 <main></main> 或 <div> 作为容器。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>真正难判断的，往往不是单个标签用法，而是整页信息架构是否支持这种嵌套 —— 如果你不确定某个区块该用 <code>section 还是 article，先问自己：它摘出来发到 Twitter 或转发给同事，别人能不能看懂？不能，就不是 article。
