<article>仅适用于满足“三可”（可单独存在、可独立引用、可被RSS或卡片流聚合）的独立内容，如博客正文、新闻卡片、用户评论、商品卡片；必须含具体标题及元数据，禁用于容器或功能组件。
article 只适合能“单飞”的内容——抽出来贴到新页面，用户仍能看懂它在说什么、谁写的、什么时候发的。 其他情况，基本是误用。
哪些内容必须用 article
判断标准就一条：是否满足“三可”——可单独存在、可独立引用（比如有自己 URL）、可被 RSS 或卡片流聚合重用。
- 博客正文（含
<header>里的<h2>、作者、时间，以及<footer>的标签或编辑链接） - 新闻列表页中每条新闻卡片（标题 + 摘要 + 来源 + 发布时间）
- 用户评论区里的每条评论（带昵称、头像占位、时间、内容）
- 产品页中每个独立商品卡片（含标题、短描述、价格、上架时间）
哪些内容绝对不能用 article
硬套只会让语义混乱，导致读屏软件误读、SEO 降权、RSS 抓取失败。
- 整个首页的“推荐文章”外层容器（那是组织逻辑，该用
<section>；里面每篇才用<article>） - 导航栏、页脚、侧边栏（分别该用
<nav>、<footer>、<aside>） - 文章内部的“第一部分”“技术原理”这类子章节（该用
<section>，除非这个“部分”本身也带标题+作者+时间+独立 URL） - 纯交互容器：点赞按钮、分页控件、评论输入框（这些不是内容，是功能，用
<form>或<div>更合适）
article 必须带标题，且不能裸奔
没有 <h1>–<h6> 的 <article> 是语义残缺的。W3C 验证器会报错 article element without heading，读屏软件可能跳过整块，搜索引擎也可能降权。
立即学习“前端免费学习笔记（深入）”；
- 标题建议放在
<header>内部，例如：<header><h2>如何正确使用 article 标签</h2><p>作者:张三 发布时间:2026-04-15</p></header> - 别只写
<h2>标题</h2>就完事——缺少作者、时间等元数据，会削弱“可独立性” - 如果标题被 CSS 隐藏（
display: none或visibility: hidden），读屏软件也读不到；需改用sr-only类或aria-label（仅限无视觉标题时兜底） - 标题不能是泛称，如“内容”“详情”，得具体，例如：
<h2>2024 年前端性能优化实践</h2>
嵌套和兼容性要注意什么
<article> 可以嵌套，但层级通常不超过两层。浏览器不强制校验，但语义错乱会在实际中暴露。
- 合理嵌套示例：主文章 → 每条评论（每条评论都满足“三可”）；教程主文 → 每个带标题+步骤+作者的实战单元
- 错误嵌套示例：把整个评论列表包成一个
<article>；在<header>或<nav>里直接放<article>（破坏已有语义） - IE9+ 原生支持，IE8 及更早版本会当普通
<div>渲染（不崩，但丢语义）；若需兼容 IE9，可在<head>加document.createElement('article') - 它没有默认 margin/padding/border，想视觉突出？得自己写 CSS，例如：
article { border-left: 3px solid #007acc; padding: 1rem; margin-bottom: 1.5rem; }
最容易被忽略的是：很多人把它当“高级 <div>”，只图结构好看。其实它的价值全在外部——SEO 爬虫靠它区分正文与边栏，读屏用户靠它跳转核心内容，RSS 工具靠它提取条目。一旦标题缺失、位置错嵌、用途错配，这些链路就断了。
