该用<article>当内容可独立订阅、索引和理解；否则用<section>。需有标题（建议<h2>起），可嵌套但须为子独立单元，禁用重复id或<div>冒充。
什么时候该用 <article> 而不是 <section>
判断标准很简单：内容能不能单独被 RSS 订阅、被搜索引擎单独索引、脱离当前页面后仍能独立理解？能，就用 <article>；不能，就用 <section>。
常见误用场景：
- 把整个博客首页的“最新文章列表”用一个
<article>包裹 —— 错，这是容器，不是独立内容，该用<section>或<div> - 把文章里的“作者简介”区块标为
<article>—— 错，它依附于主文存在，语义上属于补充信息，更适合<aside> - 在产品页里把“用户评价”每一条都套
<article>—— 对，每条评论是自包含观点，可独立引用
<article> 必须带标题吗？
W3C 规范没强制要求，但实际中几乎必须有。没有标题的 <article> 会削弱语义可信度，屏幕阅读器可能忽略其“独立性”，SEO 也可能降权。
实操建议：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 标题层级建议从
<h2>开始（除非它是页面唯一内容，才可用<h1>） - 避免用
<div>+ CSS 模拟标题 —— 辅助技术无法识别 - 如果内容天然无标题（比如一段纯代码分享），至少加
aria-label或隐藏<h3>提供语义锚点
嵌套 <article> 的边界在哪
可以嵌套，但只在逻辑上构成“子独立单元”时才合理。例如博客文章里的“读者投稿”评论区，每条评论是 <article>，而整条评论流本身不是 <article>，该用 <section>。
容易踩的坑：
- 在
<article>里再套一层<article>表示“章节” —— 错，章节是主题分组，该用<section> - 把广告位、侧边栏卡片标为
<article>—— 错，它们不具备内容独立性，属于<aside>或<div> - 同一页面多个
<article>共享同一个id—— 错，id必须唯一，哪怕语义上相似
和 <div> 混用时的性能与兼容性影响
语义标签本身不拖慢渲染，但混用会带来隐性成本：
- 辅助技术需要额外解析逻辑来推断结构，老版本 NVDA 或 JAWS 可能跳过无标题的
<article> - CSS 选择器如
article h2比.post h2多一层 DOM 遍历，差异微小但批量使用时可测 - IE11 不支持
<article>的原生语义（需document.createElement('article')垫片），但不影响显示
真正该警惕的是：用 <div class="article"> 冒充语义，既得不到 SEO 加成，又让可访问性检查工具报错 —— 这类“伪语义”比纯 <div> 更危险。
