HTML5语义标签嵌套需符合内容逻辑：article表独立单元，section为带标题的主题分组；nav仅用于主导航，aside须与主内容附属可分离；header/footer作用域限于最近节元素；避免div包裹语义标签造成降级。

HTML5 的语义标签不是套娃工具，嵌套本身不提升语义——只有嵌套符合内容逻辑时，层次才真正成立。

section 和 article 的嵌套关系不能颠倒

article 表示独立可分发的内容单元（如一篇博客、一条新闻），section 是主题性分组，不具独立性。常见错误是把 article 套在 section 外面，或用 section 包裹单个 article 却不加标题。

• 正确：多个 article 并列放在一个带

  最新文章

  的 section 内
• 错误：
  ...
  —— section 不该作为 article 的容器，除非它是文内子章节（此时应改用 section + h3）
• 注意：article 内部可以有多个 section，但每个必须有明确的 h2–h6 标题，否则语义断裂

nav 和 aside 的使用场景有硬边界

nav 仅用于**主导航链接集合**（如顶部菜单、页脚站点地图），不是所有链接组都适用；aside 必须与主内容存在「附属但可分离」的关系，比如侧边栏的作者简介、相关链接、术语解释。

• 错误：把面包屑导航（breadcrumb）放进 nav —— 它属于页面位置路径，应使用 显式标注，或直接用 ol + aria-current
• 错误：把广告位或随机推荐塞进 aside —— 若无内容关联性，用 div 更诚实
• 关键点：aside 在 DOM 中可移除而不影响主内容完整性；nav 的链接必须能跳转到站内其他核心区域

header 和 footer 的作用域由最近的节元素决定

header 和 footer 没有全局性，它们的作用范围取决于所处的最近节元素（body、article、section 等）。同一页面可有多个 header，但每个都只服务其父节。

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

• 正确：article 内的 header 放标题+作者+发布时间，body 级 header 放网站 logo 和主导航
• 错误：在 section 内放一个没标题的 header —— 这会让辅助技术困惑，它应该包含至少一个 h1–h6 或标志性内容（如 logo 图片）
• 注意：footer 不等于页脚；article 的 footer 可以是引用来源、编辑说明，和页面底部的版权信息无关

避免 div 套语义标签的“语义降级”陷阱

用 div 包裹 main、section 或 article 不会增强语义，反而可能干扰无障碍解析（尤其当 div 被赋予 role 时）。

萝卜简历

免费在线AI简历制作工具，帮助求职者轻松完成简历制作。

下载

• 错误：
  ...
  —— main 已是明确角色，外层 div 无意义且可能被误读为容器角色
• 正确：直接使用 main，必要时通过 CSS 类控制样式，而非增加无语义包装
• 例外：仅当需要添加 JS 钩子或过渡动画 wrapper 且不改变语义时，可用 div，但必须确保不覆盖或干扰原标签的 ARIA 角色

  

    

      
如何理解语义层级
      
作者：张三   发布于：2024-06-15
    
    

      
为什么嵌套要讲逻辑
      
标签不是装饰品……
    
    
  

最常被忽略的一点：浏览器和屏幕阅读器不校验嵌套是否“合理”，它们只按规范解析标签角色。语义层次是否成立，最终取决于你是否让每个标签在其上下文中承担不可替代的信息职责。