前端进阶之旅前端进阶之旅
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
首页程序员面试题库nav 元素 导航 landmark
HTHTML语义与文档

<nav> 元素应包含什么样的链接集合?所有链接都必须放在 <nav> 中吗?

<nav> 用于标识页面中的主要导航链接区块,但并非所有链接都必须放入其中。

前端进阶之旅 · 一题精讲更新于 2026.09.05
HTML#语义与文档
先看核心答案
理解线索

导航地标语义

  1. 主要导航<nav>表示站点或页面的主导航区块。
  2. 非必要链接链接可单独出现或位于其他元素中。
  3. 辅助技术屏幕阅读器可跳过<nav>区块提供快捷方式。

只有当链接集合构成主要导航块时,才使用<nav>。

核心回答

先记住这个答案

<nav> 元素表示页面中提供导航链接的主要区块,如站点菜单、目录等。并非所有链接都需放入<nav>,页脚中的链接列表通常属于次要导航,不需标记为nav。<nav>使辅助技术用户能快速识别并跳过导航区块。

  • <nav>用于主要导航链接区块。
  • 次要链接如页脚链接不需放入<nav>。
  • 可使用aria-labelledby区分多个<nav>。

`<nav>`的核心语义与导航地标

<nav>属于HTML5的区块元素,表示页面中用于提供导航链接的区域,链接可指向当前文档内部或外部。它的隐式ARIA角色是navigation,意味着它是一个地标(landmark),屏幕阅读器用户可以快速列出页面中的所有地标,并通过快捷键直接跳转到导航区域,而无需逐项朗读冗长的链接列表。

MDN明确指出,并非所有链接都必须放入<nav>中。<nav>应仅用于主要导航块,例如全局菜单、目录或操作页面的重要链接集合。页脚的链接列表(如版权、隐私、联系方式等)通常被认为是次要的,不一定需要放入nav。每个文档可以有多个<nav>,但每个应当是明显的主要导航区块。

构建一个新闻网站的导航结构

假设构建一个新闻网站页面,需求是:顶部有主菜单(新闻、体育、娱乐等),右侧有“热门文章”列表,底部有版权和公司链接(关于我们、隐私政策、联系方式)。应如何处理这些链接呢?

正确的做法是:将顶部主菜单用<nav>标识,因为它是主要的全局导航。而“热门文章”列表虽然是指向内部文章的链接,但它是建议阅读内容,不属于主要页面导航,无需放入<nav>。页脚链接通常包含关于我们、隐私等,这些是法律或站点信息链接,虽然也导航,但并非核心导航。MDN说明页脚中的链接通常不需要放入<nav>,但并未禁止,一般建议不放入。最终结构是:顶部有<nav>,页脚无<nav>。

何时不适用`<nav>`及处理方式

一个常见误区是看到多个链接就想用<nav>。当链接集合小、次要或与页脚内容混合时,放入<nav>会增加不必要的语义噪音。例如页面正文中的文字包含一些相关链接,这些链接仅作为内容的一部分,不应视为导航区块。另外,如果整个页面上只有页脚有链接,且页脚并非主导航,则不需要<nav>。

需要处理的情况是页面中存在多个导航区块(如站点导航和页内目录)。每个都可用<nav>,但需要为它们提供可访问的名称来区分。使用aria-labelledby或aria-label。例如给两个<nav>加aria-label="网站导航"和aria-label="本页目录"。如果没有明确标签,屏幕阅读器会读出“导航”两次,用户难以辨别。

回答前,多想一步

容易答错的地方

认为所有链接都必须放入`<nav>`
这是常见的误解。MDN明确说不是所有链接都需在<nav>中,nav只用于主要导航块。否则会导致页面地标过多,干扰辅助技术用户。
错误地认为`<nav>`只能包含列表
这是不正确的。<nav>允许流内容,如段落等。MDN示例展示了在<nav>中用散文文本提供链接,不一定非要以列表形式呈现。只要内容是主要导航,形式自由。
试着用自己的话回答

面试官还会怎么问?

一个页面能有多个`<nav>`吗?如何区分它们?

可以有多个,但每个应代表页面的不同主要导航。需要使用aria-labelledby或aria-label为每个提供不同标签,以区分,如“主菜单”和“页内目录”。

页脚中的链接必须放在`<nav>`中吗?

不是。MDN说明页脚通常有链接列表,但不需要放在<nav>中,除非这些链接也构成主要导航。多数情况下页脚链接是次要的。

`<nav>`里可以是段落而不只是列表吗?

可以。<nav>允许流式内容,如段落中嵌入链接。只要这些链接构成主要导航,非列表形式也有效。

从一道题,走向一组知识

把知识连起来

语义与文档

在 HTML 中,<header>、<main>、<footer> 等结构性元素如何使用,以及每个文档中 <main> 的个数限制是多少?

同属「语义与文档」专题,接着看 HTML main header footer 结构元素 在具体场景中的处理方式。

语义与文档

在 HTML5 中,<article> 和 <section> 有什么区别?如何决定使用哪个?

同属「语义与文档」专题,接着看 article section 区别 HTML5 在具体场景中的处理方式。

参考资料

  • <nav> HTML navigation section element

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. `<nav>`的核心语义与导航地标
  3. 构建一个新闻网站的导航结构
  4. 何时不适用`<nav>`及处理方式
  5. 容易答错的地方
  6. 面试官还会怎么问
  7. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑