<article>用于可独立分发的内容，判断标准是单独打开能否明确识别主题、作者和时间；必须含具体标题（h2等）及元数据，推荐用<header>包裹；嵌套仅限逻辑副本如引用文或评论，层级勿超两层；无默认样式，需CSS强化视觉，并配合语义结构保障无障碍与SEO。
必须用 <article> 包裹能“单飞”的内容，否则语义失效、SEO降权、读屏器跳过——不是加了标签就自动合规，关键在结构是否自洽。
怎么判断内容配不配用 <article>
核心就一条：把这段 HTML 单独复制到新 HTML 文件里打开，用户能否立刻看懂这是什么、谁写的、什么时候发的？
- 博客正文（含
<h2>标题 +<p>段落 +<time>发布时间 + 作者信息）→ 符合 - 新闻卡片（标题 + 摘要 + 来源 + 时间戳）→ 符合
- 每条评论（昵称 + 头像占位 + 时间 + 内容）→ 符合，每条都该独立套一层
<article> - 首页“热门文章”容器本身 → 不符合，那是组织逻辑，该用
<section> - 轮播图、客服入口、页脚版权栏 → 不符合，用
<div>或更精准的<footer>/<aside>
<article> 里必须塞哪些东西才不算裸奔
没标题的 <article> 是语义残缺体，读屏软件可能直接忽略，RSS 抓取器也可能失败。
- 至少一个
<h1>–<h6>，推荐用<h2>（因页面通常只应有一个<h1>） - 标题不能是“内容详情”“更多信息”这种泛称，得具体，比如
<h2>2024 年前端性能优化实践</h2> - 强烈建议用
<header>包住标题和元数据（作者、时间），例如：<header> <h2>如何正确使用 article 标签</h2> <p>作者：张三 <time datetime="2026-04-15">2026年4月15日</time></p> </header>
- 如果标题在外部（如网格卡片中由父级统一管理），必须用
aria-labelledby显式关联，否则语义断裂
嵌套 <article> 的边界在哪
嵌套不是为了视觉对齐，而是反映“内容可独立分发”的层级关系。浏览器不会报错，但辅助技术会误判大纲。
立即学习“前端免费学习笔记（深入）”；
- 主文章里引用另一篇完整旧文（带自己标题、作者、时间、正文）→ 可以嵌套，子
<article>是父级的逻辑副本 - 主文章拆成“背景”“方法”“结论”三块 → 不该嵌套
<article>，该用<section>，否则大纲生成器会把三块当同级主内容 - 评论区整体包一个
<article>→ 错误；每条评论各自包一个 → 正确 - 嵌套层级建议不超过两层（主文 → 引用文 / 主文 → 评论），再深就容易让读屏器迷失
样式和兼容性别被坑
<article> 在 IE9+ 和所有现代浏览器都原生支持，但——它默认没有任何样式。
- 不会自动换行、不加 margin/padding、字体大小也不变，视觉上跟
<div>完全一样 - 若需兼容 IE8，得在
<head>加document.createElement('article')或引入 html5shiv.js - 想让它视觉上突出？得自己写 CSS，例如：
article { border-left: 3px solid #007acc; padding: 1rem; margin-bottom: 1.5rem; } - 别指望加了
<article>就自动适配无障碍导航——只有配合正确的标题层级、<header>/<footer>结构，读屏软件才能准确播报“这是一篇独立文章”
最容易被忽略的是：很多人把 <article> 当成“高级 <div>”，只图结构好看。其实它不负责渲染，只负责告诉机器“这段内容能单飞”。一旦内容没标题、没元数据、没独立性，语义信号就断了，后续所有 SEO 和无障碍收益都会归零。
