article是定义独立内容的语义锚点，必须能脱离上下文自洽理解、含标题及元数据，满足可单独引用、订阅、转发、索引的“三可”原则。
要通过 HTML5 标签明确内容独立性，关键不是看它“看起来像不像一块”，而是看它“是不是一段能自己站住的内容”。真正起作用的是 article，而不是 section、div 或其他标签。
article 是独立性的语义锚点
只有 article 明确表示“这段内容可以脱离当前页面，单独被引用、订阅、转发或索引”。它的存在本身就在告诉浏览器、搜索引擎和屏幕阅读器：“这是个完整的信息单元。”
- 一篇博客正文、一条新闻稿、一个用户评论、一个产品卡片——只要它自带标题、作者、时间等元信息，且逻辑自足，就适合用 article
- 哪怕它嵌套在
或 里，语义上仍是独立的。比如主文章是 article，下面每条评论也各自是 article - 如果删掉周围所有内容，只留这个 article，读者依然能理解它讲什么、谁写的、什么时候发布的——这就达标了
section 不等于独立，而是主题分组
section 表示“有共同主题的一组内容”，但它依赖上下文。它不承诺可脱离页面存在，也不暗示可被单独分发。
- 适合用于“引言”“技术原理”“操作步骤”这类章节，每个都有明确标题（h2–h6），但合起来才构成完整叙述
- 没有标题的
很可能语义失效；仅靠 margin 或背景色“看起来分开了”，不代表它真的独立 - 别用
包裹纯按钮、纯表单或纯广告——这些更适合用 div 或更具体的标签（如
避免用错标签掩盖真实结构
把非独立内容强行套上 article，反而会干扰辅助技术与搜索引擎判断；反过来，该用 article 却用了
- 论坛帖子列表：每个帖子用 article；整个列表区域可用
或 - 侧边栏推荐文章：每篇推荐是 article，整个侧边栏用
- 页脚版权信息、联系方式：用
- 导航菜单：用
验证是否真独立：三步检查法
不用猜，直接观察机器怎么“读”你的结构：
- 打开浏览器开发者工具 → Elements 面板 → 查看 DOM 结构中 article 是否作为一级语义节点出现
- 用 VoiceOver 或 NVDA 朗读页面，确认每个 article 被播报为“文章”并附带其标题
- 检查文档大纲（outline）：现代 DevTools 的 Accessibility 标签页能生成结构树，article 应清晰列为独立条目
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
