利用HTML代码中的nav标签划分网页头部与底部导航区-html教程-PHP中文网

标签仅语义化标识导航区块，不自带位置属性，必须包裹真实可跳转链接并配aria-label区分用途，错误用法包括空内容、纯文本分隔符、混入非导航元素及缺失aria标识。

利用html代码中的nav标签划分网页头部与底部导航区

<nav></nav> 标签本身不划分“头部”或“底部”，它只语义化地标识一个**导航区块**；是否出现在页头或页脚，完全取决于你把它放在 <header></header> 还是 <footer></footer> 里——浏览器和屏幕阅读器只认嵌套关系，不认标签名自带位置。

nav 必须包裹可跳转的链接，不能空着或只放文字

很多初学者写成这样：

<nav>首页 | 关于 | 联系我们</nav>

这是无效用法。<nav></nav> 的核心语义是“一组导航链接”，必须包含 <a></a>、<button></button> 或带 role="link" 的元素。正确写法：

<nav><a href="/">首页</a>
  <a href="/about">关于</a>
  <a href="/contact">联系我们</a>
</nav>

若用 JS 控制的菜单（如汉堡菜单），需确保展开后仍能键盘聚焦、有 ARIA 属性（如 aria-expanded）
纯文本分隔符（如 |）应通过 CSS 实现，不要写在 HTML 里
同一页面最多 2–3 个 <nav></nav>；过多会稀释语义，屏幕阅读器可能忽略次要导航

头部导航和底部导航要分别用独立的 nav 标签

不能共用一个 <nav></nav>，也不能靠 class 名模拟区分。结构上必须物理分离：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

<header><nav aria-label="主菜单"><a href="/">首页</a>
    <a href="/products">产品</a>
  </nav></header><footer><nav aria-label="页脚导航"><a href="/privacy">隐私政策</a>
    <a href="/terms">服务条款</a>
  </nav></footer>

aria-label 是必须加的——因为多个 <nav></nav> 存在时，屏幕阅读器靠它区分用途
不要用 id="top-nav" 或 class="footer-nav" 替代 aria-label；这些对辅助技术无效
页脚导航通常信息密度低、链接少，避免堆砌无关外链（如全部社交媒体图标）

nav 不影响布局，CSS 才决定它在头部还是底部显示

<nav></nav> 是流式块级元素，默认独占一行，但它的视觉位置完全由父容器和 CSS 决定。常见误区：

以为把 <nav></nav> 放在开头就一定是“顶部导航”——其实如果父容器设了 display: flex; flex-direction: column-reverse，它反而会跑到最底下
用 position: absolute 把 <nav></nav> 拉到顶部，却忘了给父容器设 position: relative，导致定位错乱
响应式中忘记重置 nav ul 的默认 margin/padding，造成移动端导航栏高度异常

最稳妥的做法：始终让 <nav></nav> 嵌套在语义正确的上下文中（<header></header> 或 <footer></footer>），再用 CSS 控制内部排列（如 display: flex），而不是靠定位强行挪动。

真正容易被忽略的是 aria-label 的必要性——没有它，两个 <nav></nav> 在 VoiceOver 或 NVDA 下听起来一模一样，用户根本分不清哪个是顶部主导航、哪个是页脚辅助链接。