Section表示主题性分组，用于逻辑归类；Article表示独立可复用的内容单元，如新闻、博客文。判断关键：能否脱离页面独立存在并保持语义完整。

Section 和 Article 都是 HTML5 中的语义化区块标签，但它们表达的内容关系不同：Section 表示页面中一个通用的**主题性分组**，而 Article 强调一个**独立、可复用、可单独分发的内容单元**。

Section：按主题组织内容的“章节”

Section 适合将同一主题下的相关内容归为一组，比如一篇文章里的不同小节、网页中的功能模块、产品页里的参数与评价区域等。它不强调内容是否能脱离当前页面存在，只关注逻辑上的归属关系。

• 一个页面可以有多个 Section，彼此之间可以嵌套
• 每个 Section 最好有标题（h1–h6），否则语义会弱化
• 不要只为样式或布局而用 Section；若只是容器需要，div 更合适
• 例如：博客正文下分“背景”“方法”“结论”三块，每块用 Section 包裹

Article：自成一体的“内容实体”

Article 用于标记**能独立存在、可被引用、重用或 syndicated（如 RSS 推送）的内容**，比如一篇新闻、一条论坛帖子、一个用户评论、一个博客文章本身。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• Article 可以嵌套在 Section 内（如首页的“最新文章”Section 包含多个 Article）
• Article 内部可再包含 Section（如一篇文章里分小节）、header、footer、aside 等
• 即使把 Article 单独拿出来，它仍应保持完整意义和上下文可读性
• 例如：网站首页的“推荐文章”列表，每篇文章用 Article 标签包裹

容易混淆的典型场景

判断用哪个标签，关键看内容是否“可独立传播”：

立即学习“前端免费学习笔记（深入）”；

• 用户评论区里的每条评论 → 用 Article（每条可单独被引用或推送）
• 产品页中的“规格参数”“用户评价”“售后政策”三个板块 → 各自用 Section（是页面主题下的子模块，不独立）
• 侧边栏的“相关文章推荐”列表 → 外层用 Section，每篇推荐用 Article
• 整篇博客文章（含标题、正文、作者信息）→ 用 Article；文章内部的小节（如“安装步骤”“注意事项”）→ 用 Section

辅助判断的小技巧

想不清楚时，试试这两个问题：

• 这个内容复制到另一个网站或 RSS 订阅源里，是否依然成立？→ 是 → Article；否 → Section
• 去掉周围其他内容，仅保留它，读者能否理解核心意思？→ 能 → 倾向 Article；需依赖上下文 → 倾向 Section