HTML中article和section标签有何本质区别？

本文共计1130个文字，预计阅读时间需要5分钟。

使用伪原创+article和section不会报错，但会导致屏幕阅读器、RSS抓取、SEO权重分散——关键不在能不能用，而在该不该独立存在。

什么时候必须用 article 而不是 section

判断标准只有一个：这块内容能否被剪下来单独发布，且不丢失核心意义和上下文可读性。

• 有明确作者、发布时间（如 <time datetime="2026-04-15"></time>），且可能进 RSS 或邮件简报 → 用 article
• 同一页面中并列多条同类内容（如博客列表页的每篇博文、新闻聚合页的每条快讯）→ 每条都该是 article
• 会被第三方嵌入（比如 PWA 离线缓存单篇、CMS 接口导出某条评论）→ 必须用 article
• 用了 <header><h1>...</h1></header> + <footer> 组合，且描述的是本体（不是父容器）→ 基本就是 article

section 的正确使用场景和常见误用

section 是“主题分组”，不是“视觉容器”。它必须自带语义标题，否则就失去了分组意义。

• 整篇博客里的「安装步骤」「排错指南」「版本变更」等小节 → 合理用 section，每个配 <h2>
• 电商页的「商品参数」「用户评价」「相关推荐」区域 → 可用 section，前提是它们共同服务于一个上层主题（如“本商品信息”）
• 错误：把导航栏、页脚、侧边栏套 section → 它们已有更精确标签：nav、footer、aside
• 错误：仅因要加 class="card" 就包一层 section → 改用 div，语义优先级低于样式需求
• 错误：在 article 内部用 section 包裹纯标题+一段文字，但没新增主题层级 → 直接用 <header> 或 <h2> 更合适

article 和 section 的嵌套关系怎么写才对

嵌套本身合法，但方向和逻辑不能反。

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

• ✅ article 内含多个 section：一篇教程分「准备」「实操」「验证」三节 → 合理
• ✅ section 内含多个 article：一个「本周热点」section 下放 5 条新闻 → 合理
• ❌ section 内只包一个 article，且无额外主题包装 → 多余，直接用 article 即可
• ❌ article 内又包一个 section，但里面只是重复展示同一条新闻的摘要+全文 → 应用 <details> 或 CSS 控制，而非语义嵌套

替代方案与兼容性提醒

如果拿不准，先问自己：这段内容有没有独立作者、时间、可被引用的 ID？没有，大概率是 section 或更基础的容器。

• 纯布局/无语义需求 → 用 div，别硬套语义标签
• 需要语义但不属于内容主体（如广告位、工具栏）→ 优先考虑 aside，不是所有“旁边的东西”都是 section
• 老项目升级时发现大量 section 套 section → 检查是否漏了 main、header、footer 等外围结构标签
• 无障碍测试中，屏幕阅读器会把 article 当作独立条目播报，而 section 需依赖其 <h2>～<h6> 才能形成导航节点 → 缺标题的 section 实际等于“隐身”

最常被忽略的一点：HTML5 语义标签不是用来“让代码看起来更现代”的，而是给机器（搜索引擎、辅助技术、爬虫）提供可解析的结构信号。写完检查一遍，所有 article 是否都能当 RSS 条目发出去，所有 section 是否都有对应标题——这比记住规则更可靠。