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

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

说白了，本质区别就一句话：article是能“单飞”的内容，section是离不开母体的章节。别被各种文档绕晕，抓住这个核心，后面都好办。

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

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

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

section：有标题的主题集装箱

section本身不构成完整信息，只是把有关联的内容打包在一起，并靠标题表明“这一块讲什么”。摘出来单独发给别人，大概率让人摸不着头脑——它需要上下文才能被理解。

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

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

嵌套本身合法，但方向错了，语义就崩了。具体来说，有几种常见的嵌套模式：

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

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

这是最落地的实操标准，也是检验语义的唯一尺度：

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