article 标签使用准则：打造独立的内容单元

article 标签仅用于可独立存在、转发和索引的内容，需满足“单飞三问”（作者、时间、事件），必须含语义化标题与元信息（time、address），嵌套需子内容同样可独立，不可替代 section 或 div 的结构作用。

article 标签不是“包内容的盒子”，而是给内容发一张“独立身份证”——它只该用在能脱离页面、单独被理解、转发、索引的内容上。

判断标准：内容能否“单飞”

把那段 HTML 剪出来，粘到空白文件里打开。用户是否还能立刻回答三个问题：

• 这是谁写的？
• 什么时候发的？
• 讲了什么事？

✅ 能答出 → 适合用 article
❌ 答不出 → 该用 section 或 div

必须含标题和元信息

没标题的 article 是语义残缺：读屏软件可能跳过整块，Lighthouse 报 warning，SEO 也可能降权。

• 标题必须存在，且描述本块内容本身（如 <h2>如何排查 fetch 超时问题</h2>），不能是父页主题
• 单篇主内容可用 h1；首页列表页中每篇用 h2 更合理
• 时间必须用 <time datetime="2026-05-28">2026年5月28日</time>，datetime 属性不可省
• 作者信息优先用 <address>，而非普通段落或 div 拼接

嵌套要满足“子可独立”

嵌套 article 合法，但不等于合理。关键看子内容是否也满足“单飞三问”。

• ✅ 合理：博客正文（外层 article）→ 每条评论（含昵称、时间、、独立 URL）→ 各自为 article
• ✅ 合理：主报道中完整引用一篇已发布的专家评论，含原题、作者、时间、链接
• ❌ 错误：把长文硬拆成“背景”“方法”“结论”三个 article —— 这该用 section
• ❌ 错误：三层及以上嵌套（article → article → article）→ 内容粒度失控，需重构

别和 section/div 混用

三者本质不同：

• article = 独立实体（可 RSS 抓取、可分享、可被搜索引擎当独立页面索引）
• section = 主题分区（如“安装步骤”“API 列表”，合起来才完整）
• div = 无语义容器（仅用于样式或脚本绑定，不传递结构含义）

导航栏、页脚、侧边栏广告位、栏目标题等，都不该套 article —— 它们属于页面结构，不是独立内容单元。