nav 和 header 在 html5 中是语义独立、可嵌套或并列的元素：nav 表示导航单元，不限位置；header 是内容区块的引导容器，常含标题；二者组合以内容意图而非视觉布局为准。
nav 和 header 在 HTML5 中不是“谁包谁”的关系，而是各自承担明确、可并存的语义角色。它们可以嵌套，也可以平级共存，关键看内容逻辑是否匹配。
nav 的本质是“导航集合”，不是“顶部菜单栏”
nav 表示一组用于跳转的链接，核心判断标准是：这些链接是否构成一个独立、有目的的导航单元。它不强制出现在页面顶部，也不限于主导航。
- 常见位置包括：顶部主菜单、侧边栏分类导航、文章末尾的“上一篇/下一篇”、页内锚点跳转列表
- 一个页面可包含多个 nav，比如：
<nav aria-label="主导航"></nav>+<nav aria-label="相关文章"></nav> - 如果只是几个普通链接（如页脚里的“关于我们”“隐私政策”），没有形成导航意图，就不该用 nav
header 是“内容区块的介绍性容器”，不限于页面顶部
header 代表某个内容单元的引导部分，可能包含标题、副标题、作者信息、发布日期、搜索框等——只要它是为紧随其后的内容做“开场说明”的，就适合用 header。
- 整个页面可有一个
<header></header>放 logo 和主标题；每个<article></article>也可自带<header></header>放文章标题和元信息 - 它不等于“页面最上方的横条”，也不要求必须含
<h1></h1>；但通常应包含至少一个标题级元素（<h1>–<h6></h6> </h1>）或语义等价内容 - 避免滥用：纯装饰性 banner、无信息量的分割线、仅含按钮的工具栏，都不构成 header
两者组合时，语义优先于视觉布局
视觉上 nav 常在 header 内部（比如 logo + 主菜单），但这只是常见模式，不是语义约束。真正决定结构的是内容意图：
- 若导航是页面整体的入口枢纽，且与站点标识、搜索框同属“页面导引层”，那么
<nav></nav>放在<header></header>内合理 - 若侧边栏有一组独立分类导航，它属于
<aside></aside>区域，此时<nav></nav>就不该塞进页面级<header></header> - 某些响应式设计中，主导航被折叠为汉堡菜单，它仍保持
<nav></nav>语义，即使 DOM 位置移到了页面底部或通过 JS 动态插入
兼容与实操提醒
现代浏览器原生支持这些标签，但旧版 IE（≤8）需额外处理：
- CSS 中显式声明
header, nav, footer { display: block; }可解决渲染问题 - 若需支持 IE8，引入 html5shiv 脚本即可激活语义标签识别
- 别忘了加
aria-label（如<nav aria-label="主导航"></nav>），这对屏幕阅读器用户至关重要
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
