是语义化标签，标识独立可分发内容单元，非样式容器；须含恰当标题、避免误用为布局元素，影响SEO与无障碍访问。
HTML <article></article> 标签不是“内容容器”，而是语义信号
它不改变样式，也不自动分栏或加边框，只告诉浏览器和辅助工具：“这段内容是独立可分发的”。搜索引擎会据此判断内容权重，读屏软件会用它组织导航逻辑。
常见错误是把它当 <div> 用——比如整个首页套一个 <code><article></article>，或者把导航栏、页脚硬塞进去。这反而污染语义，让爬虫误判主次。
- 适合场景：
<article></article>应包裹完整、自包含的内容单元，例如一篇博客正文、一条新闻、一个用户评论、一个独立产品卡片 - 不适合场景：侧边栏推荐列表、面包屑导航、页脚版权信息、整页布局容器
- 嵌套规则：可以嵌套另一个
<article></article>（比如评论区里每条评论），但父<article></article>和子<article></article>必须逻辑上是“整体-部分”关系，而非“页面-组件”关系
和 <section></section> 的区别关键在“是否可独立存在”
<section></section> 表示主题性分组，但不一定能脱离上下文存在；<article></article> 必须能单独被引用、重用、RSS 抓取。
举个例子：某技术文档页里，“安装步骤”“配置说明”“API 列表”各自用 <section></section> 合理；但如果“API 列表”本身是一份可单独发布的接口文档（有自己标题、作者、更新时间），那它就该用 <article></article> 包裹。
立即学习“前端免费学习笔记（深入）”；
- 判断口诀：删掉周围内容后，这段还能不能被理解、被分享、被收录？能 →
<article></article>；不能 →<section></section>或<div> <li>不要因为“看起来像一篇文章”就用 <code><article></article>——没有明确作者、发布日期、独立 URL 的内容，大概率只是<section></section> - 浏览器对两者无渲染差异，但 Chrome DevTools 的“Accessibility”面板会按语义树展示层级，错用会导致结构混乱
- 正确做法：每篇
<article></article>内用<h2></h2>或更小标题，如<h2>CSS 变量在暗色模式中的实际陷阱</h2> - 如果页面只有一个
<article></article>（如单篇博客），可用<h1></h1>，但前提是它确实是该页面唯一核心主题 - 嵌套
<article></article>时，子级标题应比父级低一级（如父用<h2></h2>，子用<h3></h3>），否则屏幕阅读器会丢失层级关系 - 验证方式：用 Chrome 打开页面 → F12 → 切到 “Accessibility” 面板 → 查看 “Landmark” 和 “Document Structure”，确认
<article></article>出现在合理位置且数量准确 - 不要为了 SEO 堆砌：一个页面多个
<article></article>是正常行为（如新闻列表页），但每个都得有独立价值，否则会被判定为语义垃圾 - 服务端渲染（SSR）或静态站点生成器（如 Next.js、Hugo）中，
<article></article>的位置直接影响首屏 HTML 结构，别等到前端 JS 注入后再补
必须配合恰当的标题层级，否则语义断裂
<article></article> 不自带标题，但语义完整性依赖内部至少一个 <h1></h1>–<h6></h6>。这个标题应描述该内容单元本身，而不是父级页面的主题。
错误写法：<article><h1>我的个人博客</h1>
<p>今天聊 CSS 变量…</p></article> —— 这个 <h1></h1> 属于整站，不该出现在每篇 <article></article> 里。
SEO 和无障碍的实际影响比你想象中更直接
Google 明确表示会使用 <article></article> 识别主内容区块，尤其在移动搜索结果中影响“网页摘要”生成；WCAG 要求关键内容有明确语义角色，缺失或误用会降低无障碍评分。
容易被忽略的一点：RSS 订阅器、微信公众号抓取、甚至某些邮件客户端，都依赖 <article></article> 提取正文。错标后可能抓到导航栏文字，或漏掉真正正文。
