HTML5核心语义详解：article与section的本质区别

article是能独立存在的内容实体，具备完整上下文（标题、时间、作者等），可被RSS抓取或直接转发；section是依赖上下文的主题分组容器，需有明确语义标题，不能单独成文。

本质区别就一句话：article 是能“单飞”的内容，section 是离不开母体的章节。

article：自带身份证的内容实体

它不是普通段落，而是一个有作者、有时间、有标题、能被 RSS 抓取、可被第三方直接嵌入或转发的独立信息单元。复制整块 HTML 到新页面，别人不看原站也能看懂。

• 典型场景：博客正文、新闻稿、用户评论、产品详情页、独立教程页
• 必须自带完整上下文——至少包含标题（h1–h6）、发布时间（time）或作者信息
• 内部可嵌套 header、footer、section，但这些都服务于它自身，不替父级说话

section：有标题的主题集装箱

它本身不构成完整信息，只是把有关联的内容打包在一起，并靠标题表明“这一块讲什么”。摘出来单独看，大概率让人摸不着头脑。

• 典型场景：一篇教程里的“安装步骤”“配置说明”“排错指南”；商品页的“规格参数”“用户评价”“售后政策”
• 每个 section 必须且只能有一个语义标题（h1–h6），标题文字要真实反映该块主题
• 不能替代 nav、aside、footer 等更精确标签——导航栏不是“主题分组”，是导航；页脚不是“章节”，是页脚

嵌套关系不是技术问题，而是逻辑问题

嵌套本身合法，但方向错了，语义就崩了。

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

• ✅ article 里放多个 section：合理。比如一篇技术文章分“背景”“操作”“验证”三节
• ✅ section 里放多个 article：合理。比如“本周精选”板块下并列 5 篇新闻
• ❌ section 里只包一个 article，且没加统一标题或上下文包装：多余，直接用 article 即可
• ❌ article 内部用 section 包裹重复内容（如摘要+全文）：应改用 details 或 CSS 控制显隐，而非语义混淆

判断口诀：剪下来发微信，别人能不能看懂？

这是最落地的实操标准：

• 能看懂，有头有尾有作者时间 → 用 article
• 只剩半句话，得回原页面找上下文 → 用 section
• 既不独立，也没明确主题，纯为加边框或 margin → 老实用 div