标签必须用于可独立分发、有明确标题和作者/时间的自包含内容，如博客正文、新闻稿；误用会损害可访问性和seo，且需手动添加css样式。
article 标签不是语义装饰，用错会破坏可访问性和 SEO
浏览器不强制要求 <article></article> 必须包裹“完整文章”，但屏幕阅读器、搜索引擎会按语义理解它为独立、可分发的内容单元。误用会导致结构混乱——比如把侧边栏导航或页脚版权信息包进 <article></article>，会被读作“一篇独立文章”，实际却不是。
- 只用于能单独存在、有明确作者/发布时间/主题的自包含内容：博客正文、新闻稿、论坛帖子、产品卡片（带标题+摘要+作者）
- 避免嵌套多个
<article></article>仅为了布局对齐——那是<section></section>或 CSS Grid/Flex 的事 - 如果内容没有独立性（比如“关于我们”页面里的一段介绍），用
<div> 或 <code><section></section>更合适article 必须有明确的标题，否则语义断裂
<article></article>自身不带标题，但 WCAG 和主流爬虫都期望它内部至少有一个<h1></h1>–<h6></h6>。没标题的<article></article>在无障碍测试中会被标记为“缺失主标题”，且 RSS 抓取可能失败。- 优先用
<header></header>包裹<h2></h2>（注意：同一页面<h1></h1>应唯一，正文区块通常用<h2></h2>） - 标题要具体，不能是“内容”“详情”这类泛称；例如
<h2>2024 年前端性能优化实践</h2> - 如果标题在外部（如卡片网格中标题由父容器统一管理），需用
aria-labelledby显式关联，否则语义丢失
嵌套 article 的边界在哪？看内容是否“可独立分发”
常见误区是把评论列表整个塞进一个
<article></article>，或者给每条评论都套一层<article></article>。判断标准只有一个：这条内容能否脱离当前页面，被单独转发、收藏、RSS 订阅？- 博客正文 + 作者信息 + 发布时间 → 是
<article></article> - 该文下的每条评论（含用户头像、昵称、时间、内容）→ 每条都是独立
<article></article> - 评论输入框、点赞按钮、分页控件 → 不是
<article></article>，属于交互容器，用<section></section>或<form></form> - 整页评论区（含所有评论 + 分页）→ 用
<section></section>，不是<article></article>
兼容性没问题，但别指望它自动加样式
<article></article>在 IE9+、所有现代浏览器都原生支持，无需 polyfill。但它默认没有任何样式——既不换行，也不加边距，更不会变字体大小。开发者常误以为用了就“自动美观”，结果发现和<div> 看起来一模一样。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>CSS 中需手动定义基础样式，例如：<pre class="brush:php;toolbar:false;">article { display: block; margin-bottom: 2rem; }</pre></li> <li>不要依赖 <code><article></article>实现响应式断点——那是媒体查询和 CSS Grid 的职责 - 优先用
- 若用 CSS 框架（如 Tailwind），仍需显式加类，
<article class="prose"></article>才有效，纯标签无作用
<article></article> 的关键不是“有没有”，而是“为什么是它而不是 <section></section> 或 <div>”。一旦开始考虑 RSS 输出、语音朗读顺序、SEO 结构化数据，这个选择就不再是可有可无的了。</div>
