section表示主题性分组，用于逻辑归类；article表示独立可复用的内容单元，如新闻、博客文。判断关键：能否脱离页面独立存在并保持语义完整。
Section 和 Article 都是 HTML5 中的语义化区块标签，但它们表达的内容关系不同：Section 表示页面中一个通用的**主题性分组**，而 Article 强调一个**独立、可复用、可单独分发的内容单元**。
Section：按主题组织内容的“章节”
Section 适合将同一主题下的相关内容归为一组，比如一篇文章里的不同小节、网页中的功能模块、产品页里的参数与评价区域等。它不强调内容是否能脱离当前页面存在，只关注逻辑上的归属关系。
- 一个页面可以有多个 Section，彼此之间可以嵌套
- 每个 Section 最好有标题（h1–h6），否则语义会弱化
- 不要只为样式或布局而用 Section；若只是容器需要，div 更合适
- 例如：博客正文下分“背景”“方法”“结论”三块，每块用 Section 包裹
Article：自成一体的“内容实体”
Article 用于标记**能独立存在、可被引用、重用或 syndicated（如 RSS 推送）的内容**，比如一篇新闻、一条论坛帖子、一个用户评论、一个博客文章本身。
- Article 可以嵌套在 Section 内（如首页的“最新文章”Section 包含多个 Article）
- Article 内部可再包含 Section（如一篇文章里分小节）、header、footer、aside 等
- 即使把 Article 单独拿出来，它仍应保持完整意义和上下文可读性
- 例如：网站首页的“推荐文章”列表，每篇文章用 Article 标签包裹
容易混淆的典型场景
判断用哪个标签，关键看内容是否“可独立传播”：
- 用户评论区里的每条评论 → 用 Article（每条可单独被引用或推送）
- 产品页中的“规格参数”“用户评价”“售后政策”三个板块 → 各自用 Section（是页面主题下的子模块，不独立）
- 侧边栏的“相关文章推荐”列表 → 外层用 Section，每篇推荐用 Article
- 整篇博客文章（含标题、正文、作者信息）→ 用 Article；文章内部的小节（如“安装步骤”“注意事项”）→ 用 Section
辅助判断的小技巧
想不清楚时，试试这两个问题：
- 这个内容复制到另一个网站或 RSS 订阅源里，是否依然成立？→ 是 → Article；否 → Section
- 去掉周围其他内容，仅保留它，读者能否理解核心意思？→ 能 → 倾向 Article；需依赖上下文 → 倾向 Section
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
