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 时）。
- 错误：
... main已是明确角色，外层div无意义且可能被误读为容器角色 - 正确：直接使用
main，必要时通过 CSS 类控制样式，而非增加无语义包装 - 例外：仅当需要添加 JS 钩子或过渡动画 wrapper 且不改变语义时，可用
div，但必须确保不覆盖或干扰原标签的 ARIA 角色
如何理解语义层级
作者：张三 发布于：2025-06-15
为什么嵌套要讲逻辑
标签不是装饰品……
延伸阅读
HTML5 与无障碍支持
最常被忽略的一点：浏览器和屏幕阅读器不校验嵌套是否“合理”，它们只按规范解析标签角色。语义层次是否成立，最终取决于你是否让每个标签在其上下文中承担不可替代的信息职责。
