<article>应仅包裹可独立分发、可复用的内容单元，如完整博文，须含<header>（含标题）、正文语义标签、元信息（作者/时间/分类）及<footer>，多篇并列时须为同级兄弟元素，不可嵌套，且需配合<main>、<time datetime>等其他语义标签协同生效。
article 标签该包哪些内容才符合语义规范
不是所有博客正文都适合直接塞进 <article> —— 它只适用于「可独立分发、可被复用」的内容单元。比如一篇带标题、作者、日期、正文、标签的完整博文，就符合；但侧边栏推荐文章列表、页脚版权声明、导航栏就不该包进去。
常见错误是把整页布局都套上 <article>，结果导致屏幕阅读器误判内容层级，SEO 也收不到正确语义信号。
- 必须包含至少一个
<header>（通常含<h1>～<h6>标题） - 正文段落用
<p>、列表用<ul>/<ol>，避免用<div>模拟语义 - 作者、发布日期建议放在
<header>或<footer>内，用<time datetime="2024-05-20">2024年5月20日</time>标注时间
如何处理多篇文章共存时的嵌套与结构
首页或归档页常有多个博文并列，这时每个 <article> 必须是同级兄弟元素，不能嵌套在另一个 <article> 里——语义上它们是平等的独立项。
容易踩的坑：有人为“统一控制样式”把所有博文包进一个外层 <article>，这会破坏语义，也让 RSS 抓取器无法识别单篇条目。
立即学习“前端免费学习笔记（深入）”；
- 用
<main>包裹整个博文列表区域，每篇用独立<article> - 如果某篇博文内引用了另一篇（如“延伸阅读”），被引用内容应保持原结构，不降级为
<section>或<div> - 注意
<article>可以嵌套自身（比如评论区每条评论也可用<article>），但仅限于“对当前内容的独立回应”场景
时间、作者、分类等元信息怎么放才不丢语义
这些信息不是装饰性文字，而是关键上下文。放在 <header> 里最自然，但很多人图省事丢在开头 <p> 里，结果搜索引擎和辅助技术完全忽略它们。
示例正确结构：
<article>
<header>
<h1>如何用 CSS Grid 实现响应式卡片布局</h1>
<p class="meta">
作者：<span>张三</span>，
发布于 <time datetime="2024-05-20">2024年5月20日</time>，
分类：<a href="/tag/css">CSS</a>、<a href="/tag/layout">布局</a>
</p>
</header>
<section><!-- 正文 --></section>
<footer>
<p>本文遵守 CC BY-NC-SA 4.0 协议</p>
</footer>
</article>-
<time>的datetime属性必须是机器可读格式（如YYYY-MM-DD），显示文本可本地化 - 分类标签用
<a>而非纯文本，既保留链接能力，又明确其导航属性 - 版权信息建议放
<footer>，而非<header>或正文末尾的<p>
为什么用了 article 却没提升 SEO 或无障碍体验
因为光有标签不够，还得配合其他语义要素。单独一个 <article> 不会自动触发搜索引擎加权，也不会让屏幕阅读器“读懂”内容逻辑。
真正起作用的是组合：标题层级是否连贯、<time> 是否带 datetime、是否有跳过重复导航的 <main>、图片是否带 alt……漏掉其中一环，<article> 就只是个空壳。
- 检查浏览器开发者工具的“Accessibility”面板，看
<article>是否被识别为“Article”角色 - 用 Lighthouse 做 SEO 和无障碍审计，重点关注“Document does not have a main landmark”这类提示
- 别依赖
<article>自动解决一切——它只是语义拼图中的一块，且必须和其他标签严丝合缝地咬合
