应使用 article 标签标记逻辑上独立、可单独引用或分发的内容单元，如博客正文、新闻稿；section 用于主题区块，需带标题；div 无语义，仅适用于纯样式或脚本容器。
独立内容区块应该用 article
如果一块内容能脱离当前页面被单独引用、分发、订阅或打印（比如博客正文、新闻稿、用户评论、论坛帖子），就该用 article。它不是“看起来像一篇文章”才用，而是“逻辑上就是一篇完整、自足的内容单元”才用。
常见误用是把产品卡片、广告位、功能入口区也套上 article——这些没有独立语义，只是页面布局的一部分，用 div 或更贴切的 section 更合适。
-
article内部可嵌套header（含标题、作者、时间）、footer（如版权声明、编辑说明）和多个section（如“背景”“方法”“结论”） - 同一页面多篇文章，每个必须各自包裹一层
article，不能共用一个外层再内部循环渲染 - RSS 订阅源、打印预览、无障碍阅读器都会把
article当作一个可跳转/可操作的独立节点处理
section 和 article 的边界在哪
section 是主题区块，article 是独立内容单元；二者不互斥，但职责不同。一个 article 里可以有多个 section，但一个 section 不该假装自己是 article。
判断依据很简单：删掉周围所有其他内容，只留这一块，它还能被理解、被分享、被收录进 RSS 吗？能 → article；不能，只是“安装步骤第 3 步”或“用户评价区”这种上下文强依赖的模块 → section。
-
section必须带标题（h2–h6），否则语义断裂，屏幕阅读器无法识别其结构意图 -
article可以没有显式标题（比如一条简短的微博式评论），但需自带元信息（如time、作者标识）来支撑其独立性 - 嵌套时，
article>section合理；反过来，section>article也合理（比如“评论区”是section，每条评论是article）
为什么不用 div 包裹独立内容
div 没有语义，对 SEO、无障碍访问、内容提取工具（如 RSS 抓取器、阅读模式）完全不可见。搜索引擎不会把它当作一个内容实体索引，屏幕阅读器也不会给它分配独立导航层级。
这不是“写得好看不好看”的问题，而是“机器能不能正确理解你在表达什么”的问题。用错标签，等于主动放弃结构红利。
- 纯样式容器、JS 操作钩子、临时分组 → 用
div - 需要被外部系统识别为“一条内容” → 必须用
article或section（按独立性选） - 已有 class 名如
post-card或comment-item，别让它掩盖语义需求：先选对标签，再加 class
容易被忽略的嵌套细节
嵌套本身合法，但层级混乱会破坏大纲（outline）算法。浏览器和辅助技术靠 HTML 标签生成隐式文档结构，article 和 section 都会创建新节（sectioning root），嵌套过深会让结构扁平化失效。
例如：article > section > article 是允许的（如主文章 + 内嵌引用的另一篇完整报道），但 section > section > section > article 就容易让大纲丢失主干。
- 优先用
article直接包裹真正独立的内容，而不是层层section套娃再塞article - 每个
article应该有明确的上下文归属（比如属于哪个栏目、哪篇主文），可通过aria-labelledby或隐式父级header补充，而非靠嵌套深度暗示 - 验证方式：用浏览器开发者工具打开“Accessibility”面板，看大纲树是否符合预期
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
