标签仅用于主要导航链接，不可作为通用容器；其内应嵌套组织链接，须添加aria-label区分多组导航，次要导航应改用。
nav 标签只该放导航链接，不是“导航区容器”
<nav></nav> 是语义化标签，浏览器、屏幕阅读器和搜索引擎靠它识别“这是一组跳转到其他页面或页面锚点的链接”。它不负责样式，也不适合塞进标题、搜索框、logo 或按钮——那些该用 <header></header>、<form></form> 或普通 <div>。
<p>常见错误包括：</p>
<ul>
<li>把整个顶部栏（含 logo + nav + 搜索）全包进一个 <code><nav></nav>
<nav></nav> 里放 <button></button> 控制菜单展开（应放外面或用 <details></details>）<nav></nav> 包裹面包屑（<ol class="breadcrumb"></ol>），其实该用 <nav aria-label="Breadcrumb"></nav> + <ol></ol> 组合才合规HTML4 里没有 nav，用 ul + CSS 是最合理方案
HTML4 不支持 <nav></nav>，但语义不能丢。此时用 <ul></ul> 包裹导航项，是 W3C 推荐做法——因为主导航本质就是“一组并列的链接”，<ul></ul> 天然表达这种关系，比纯 <div> + <code><a></a> 更清晰。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<div id="main-nav">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</div>
注意点：
- 不要省略
<ul></ul>直接写多个<div><a></a></div></li> <li>如果导航是垂直侧边栏，仍用 <code><ul>
，语义不变，仅靠 CSS 改布局 - 可用
role="navigation"补充 ARIA 语义：<ul role="navigation"></ul>
nav 和 ul 的嵌套关系：nav 里通常放 ul，不是替代关系
HTML5 中，<nav></nav> 和 <ul></ul> 是协作关系，不是二选一。标准结构是 <nav></nav> 作为语义外层，内部用 <ul></ul> 组织链接列表——既满足语义，又保留列表的结构逻辑。
推荐结构：
<nav aria-label="主菜单">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li>
<a href="/support">支持</a>
<ul>
<li><a href="/faq">FAQ</a></li>
<li><a href="/docs">文档</a></li>
</ul>
</li>
</ul>
</nav>
关键细节：
- 嵌套下拉菜单时，子
<ul></ul>必须放在父<li>内，不能脱离 -
aria-label或aria-labelledby强烈建议加上，否则多组<nav></nav>（如页脚导航）会难以区分 - 纯文字链接（无图标/图片）时，
<ul></ul>比<div> 更利于键盘 Tab 顺序和屏幕阅读器遍历 <h3>别为了“语义”硬套 nav，次要导航用 div + aria 更稳妥</h3> <p>不是所有带链接的区域都该用 <code><nav></nav>。W3C 明确说：只有“主要导航区块”才适用。比如页脚一堆友情链接、社交图标、版权信息旁的“隐私政策”“条款”，这些属于次要导航，用<div role="navigation" aria-label="页脚链接"> 更准确。 <p>判断依据很简单：</p> <ul> <li>用户第一次访问页面，是否靠它快速跳转核心栏目？→ 是，用 <code><nav></nav> - 它是否重复出现在多个页面（如 header 固定导航）？→ 是，大概率是主导航
- 它是否只是补充性、低频使用的链接集合？→ 否，改用
<div> + <code>role过度使用
<nav></nav>反而稀释语义，让辅助技术更难聚焦重点。
