article必须能“单飞”——抽出来贴到新页面仍可独立理解，需含标题及作者、时间等元数据；无标题或不可单飞则语义失效，SEO与读屏支持均受损。
article必须能“单飞”——抽出来贴到新页面还能看懂吗
不能。它不是视觉容器，而是语义断言：这段内容有自己完整的上下文，能被 RSS 抓取、被搜索引擎单独索引、被用户转发分享后仍可读。常见误用是把整个 main 区域或首页推荐模块外层套一个 article，结果里面只有标题和几行摘要，没作者、没时间、没独立 URL，读屏软件一扫就跳过。
判断方法极简：复制整段 HTML，新建空白文件粘贴进去打开。如果用户仍能立刻回答三个问题——“这是谁写的？”“什么时候发的？”“讲了什么事？”——那才配用 article。
- ✅ 博客正文（含
<header><h1>...</h1><p>作者：张三 发布时间：2026-05-20</p></header>） - ✅ 新闻列表页中每条卡片（
<h2>暴雨致多地停课</h2><p>据教育局通报……</p><footer>来源：XX日报 2026-05-31</footer>） - ❌ 首页“热门标签”模块外层容器（只是组织逻辑，该用
section） - ❌ 导航栏、页脚、侧边栏广告位（该用
nav、footer、aside）
每个article里必须有且仅有一个标题元素（h1–h6）
没有标题的 article 是语义残缺的。浏览器不会报错，但读屏软件可能直接忽略整块内容，搜索引擎也可能降权。标题不一定要是 h1，但必须存在，且应描述该内容单元本身，而不是父页面主题。
推荐结构是把标题放在 header 内部，同时带元数据：
立即学习“前端免费学习笔记（深入）”；
<article>
<header>
<h2>如何排查 fetch 超时问题</h2>
<p>作者：李四 更新时间：2026-05-28</p>
</header>
<p>Chrome DevTools 的 Network 面板中……</p>
<footer><a href="/edit/123">编辑</a></footer>
</article>
- 标题层级可重置：每个
article内的h1都算作“本文主标题”，不会和页面其他h1冲突 - 别为了视觉统一强行降级标题（比如全用
h3），语义优先于样式 - 真没标题？至少用
<h2 aria-label="无标题技术笔记"></h2>占位，否则语义链断裂
嵌套 article 的唯一合法场景：子内容也满足“三可”原则
article 可以嵌套另一个 article，但不是因为“看起来像文章”，而是因为子内容本身也具备可独立存在、可引用、可聚合的属性。例如一篇报道中嵌入的专家评论，若该评论有自己署名、发布时间、独立链接，那就该用 article；如果只是普通回复或摘要，则该用 section 或 blockquote。
- ✅ 合法嵌套：博客正文（外层
article）→ 每条评论（每个都是独立article） - ❌ 错误嵌套：教程文章（外层
article）→ “第一部分”“第二部分”（该用section） - ⚠️ 避免多层嵌套：超过两层（如
article > article > article）会稀释语义，辅助技术难以导航 - 嵌套时，子
article仍需自带标题和元数据，不能复用父级的header
兼容性与样式：不渲染、不自动加边距、不保语义
article 在所有现代浏览器中都原生支持，但它没有默认 margin/padding/border，也不改变布局流。IE8 及更早版本不认识它，但不会崩——会被当普通 div 渲染，只是丢失全部语义价值。
- 需要视觉区分？自己写 CSS：
article { border-left: 3px solid #007acc; padding: 1rem; } - 要兼容 IE9？在
<head>加document.createElement('article')，或引入html5shiv.js - 别指望加了
article就自动适配无障碍：必须配合正确标题 +header/footer结构，读屏软件才能播报“这是一篇独立文章” - 拼写错误（如
<_article>）或漏掉<!DOCTYPE html>，语义直接归零
最容易被忽略的是：语义完整不等于结构完整。一个 article 套对了，但里面没标题、没元数据、没合理嵌套，它就只是个带语义标签的空壳——对 SEO 和无障碍来说，和没写一样。
