article表示可独立分发/复用的内容单元（如博客、新闻），section表示页面内有主题的逻辑分组（如“作者介绍”）；判断标准是内容能否单独被理解、引用或RSS订阅。
section 和 article 的语义区别在哪
两者都定义文档区块，但 section 表示“有主题的分组”，article 表示“可独立分发/复用的内容单元”。比如一篇博客正文、一条新闻、一个用户评论，都该用 article；而文章里的“作者介绍”“相关推荐”“评论区”这些只是页面内的逻辑分块，适合用 section。
关键判断标准：如果把这块内容单独拎出来，还能被别人理解、引用、RSS 订阅或搜索引擎收录，就该用 article。否则，优先考虑 section 或更中性的 div。
嵌套关系常见但不能乱套
article 里可以嵌 section（比如一篇长文分成“背景”“方法”“结论”几个小节），反过来不行——section 不该包裹多个独立内容单元。下面这种写法是错的：
<section> <article><h2>第一篇报道</h2></article> <article><h2>第二篇报道</h2></article> </section>
应该改成：
立即学习“前端免费学习笔记（深入）”；
<main> <article><h2>第一篇报道</h2></article> <article><h2>第二篇报道</h2></article> </main>
-
section不自带隐含含义，不表示“独立内容”，所以它不能替代article做语义包装 - 多个
article并列时，用main或section包一层也行，但那层只是容器，不是语义主体 - 用
section包article只在需要为这一组文章加统一标题或样式时才合理，比如<section><h2>本周热点</h2>...</section>
SEO 和辅助技术怎么看待它们
搜索引擎和屏幕阅读器会把 article 当作一个完整语义单元处理：它的 <h1>~<h6> 会被纳入内容结构分析，标题可能出现在搜索摘要中；而 section 的标题只影响局部层级，不提升整体内容权重。
实际影响包括：
- 某些 RSS 解析器只抓取
article内容，忽略section - 浏览器的“阅读模式”更倾向提取
article，对section可能直接跳过 - WCAG 要求每个
article应有明确标题（h1–h6），section则非强制
什么时候干脆用 div 更合适
如果一块内容既不构成独立语义单元（不适合 article），又没有明确主题或上下文（不适合 section），那就老实用 div。比如纯布局容器、JS 操作钩子、CSS 样式包裹层。
典型误用场景：
- 轮播图外层写成
<section class="carousel">—— 它只是交互组件，无内容主题，应为<div class="carousel"> - 导航栏写成
<section aria-label="主导航">—— 导航有专用标签nav，不该硬套section - 表单区域写成
<section><form>...</form></section>—— 表单本身已有语义，外层section多余
语义标签不是越多越好，而是越准越好。多一层 section 或少一个 article，有时比 class 名写错还难调试。
