article标签专用于可独立存在、可分发的内容，如博客正文、新闻卡片、用户评论；必须含标题及元数据（作者、时间），否则语义残缺，损害seo与无障碍访问。
article 标签不是“包内容的盒子”，而是给内容发一张“独立身份证”——用错就等于告诉搜索引擎和读屏软件：“这段内容可以被单独抓取、转发、朗读”，但实际它根本站不住脚。
怎么判断该不该用 article？只看它能不能“单飞”
把那段 HTML 剪出来，粘到空白文件里打开。用户是否还能立刻回答三个问题：这是谁写的？什么时候发的？讲了什么事？
- ✅ 博客正文含
<header><h2>标题</h2> <p>作者:李四 更新时间:<time datetime="2026-05-28">2026-05-28</time></p></header>→ 符合 - ✅ 新闻卡片含
<h3>暴雨致多地停课</h3> <p>据教育局通报……</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <footer>来源:XX日报 <time datetime="2026-05-31">2026-05-31</time></footer>→ 每条都该是独立article - ❌ 首页“热门标签”模块外层套
article→ 它只是组织逻辑，该用section - ❌ 导航栏、页脚、侧边栏广告位 → 语义完全错位，分别该用
nav、footer、aside
article 里没 h1–h6 就是语义残缺
没有标题的 article 不会报错，但读屏软件可能直接跳过整块，Lighthouse 会标 warning，Google 也可能降权。
- 标题必须存在，且描述本块内容本身（不是父页面主题），比如
<h2>如何排查 fetch 超时问题</h2>，而不是<h2>我的技术博客</h2> - 不强制用
h1；首页列表页中每篇用h2更合理，避免多个h1 - 真没标题？至少用
<h2 aria-label="无标题技术笔记"></h2>占位，别裸留空article - 别用
<div class="title"> 模拟标题——屏幕阅读器完全识别不了 <h3>嵌套 <code>article的唯一合法理由：子内容也满足“三可”嵌套本身语法合法，但绝大多数误用场景，都是因为混淆了“视觉分组”和“语义独立”。
- ✅ 合法：博客正文（外层
article）→ 每条评论（每个带昵称、时间、<time></time>、独立 URL）→ 各自为article - ✅ 合法：主报道中嵌入专家评论，且该评论本身有署名、发布时间、原文链接 → 可独立引用
- ❌ 错误：把“第一部分”“第二部分”包成子
article→ 那该用section - ❌ 错误：超过两层嵌套（
article→article→article）→ 说明内容粒度失控，该回退重梳结构
article和section的本质区别就一句话section是“主题分区”，article是“独立实体”。关键不在长得像不像文章，而在抽出来后还剩多少信息量。- 技术文档页里的“安装步骤”“配置说明”“API 列表” → 各自用
section（合起来才完整） - 但如果“API 列表”本身是一份可单独发布的接口文档（含自己标题、作者、更新时间、独立
<time></time>）→ 那它就该是article - 产品页的「用户评价」区域 → 整个区域用
section或aside，每条评价用article - 别用
section包一篇完整文章 —— 这等于主动放弃语义优势，对 SEO 和无障碍访问毫无益处
最容易被忽略的是元信息的机器可读性：
<time datetime="2026-05-28"></time>里的datetime属性必须是 ISO 8601 格式，普通文本如<p>发布于2026年5月28日</p>对爬虫和读屏软件毫无价值。还有，article内部的header和footer作用范围仅限于本块，不是放全站 logo 或版权信息的地方。 - ✅ 合法：博客正文（外层
