article是语义锚点而非排版工具，用于标识可独立被RSS抓取、搜索引擎索引、跨平台分享的内容单元；核心判断标准是删去上下文后能否自洽理解与收录。
article 标签不是排版工具，而是语义锚点——它不控制样式、不自动分栏，只告诉浏览器和爬虫：“这段内容能单独被 RSS 抓取、被搜索引擎当独立页面索引、被转发到别处仍讲得清一件事”。用错就等于把一篇新闻塞进没寄件人、没邮编、没标题的信封，寄不出去，也收不到回音。
什么时候必须用 article 而不是 section
核心判断就一条：删掉周围所有内容，它自己还能不能被理解、被分享、被收录？
- 能 → 用
article：博客正文、新闻稿、用户评论、产品卡片（含标题+摘要+作者+时间） - 不能 → 用
section：首页的“最新文章”栏目标题、“安装步骤”“API 列表”这类依赖上下文的主题区块 - 纯为 flex 布局或 JS 绑定加的外层容器 → 用
div，别硬套语义标签
article 必须带标题，但不一定是 h1
W3C 明确要求每个 article 至少含一个 h1–h6，否则 HTML5 Validator 会报 “article element without heading”，且屏幕阅读器会跳过整块内容。
- 单页仅一篇主文章时，可用
h1，但标题文本必须描述该文本身（如<h1>CSS 变量在暗色模式中的实际陷阱</h1>），而非整站名 - 首页并列三篇博客时，每篇用
h2；若某篇内嵌评论，每条评论用h3，保持层级递进 - 千万别用
<div class="title">模拟标题——读屏软件完全识别不了
嵌套 article 的唯一合理场景
子 article 必须是父级内容中可被独立引用的完整副本，不是小节拆分。
- 合理：技术教程（父
article）里完整引用另一篇已发布的实践指南（子article），含其原题、作者、时间、正文 - 错误：把一篇长文硬拆成“背景”“方法”“结论”三个
article—— 这该用section，否则文档大纲断裂，Chrome DevTools 的 Accessibility 面板会提示 “outline has unexpected jump” - 危险操作：在
nav或footer里套article，直接误导辅助技术和 SEO 爬虫
聚合页结构：用 main + section + 多个 article
新闻聚合页或博客首页的标准骨架，不是靠视觉堆叠，而是靠语义分层：
-
main作为根容器，不加额外div包裹 - 每个栏目（如“国内要闻”“国际快讯”）用带
h2的section划分，无标题的section等同于滥用div - 每个
section内并列多个article，每条新闻自成单元，含header（标题+time datetime）、p、footer - 单篇新闻内部若需分模块（如“事件背景”“专家解读”），用
section+h3，而非再套article
最容易被忽略的是：article 内部的 time 必须带 datetime 属性（如 <time datetime="2026-05-19">5月19日</time>），否则机器无法解析发布时间，富摘要和排序功能就失效了。
