先记住这个答案
<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>允许流式内容,如段落中嵌入链接。只要这些链接构成主要导航,非列表形式也有效。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。