HTML5导航标签nav用法详解 | AI生成和翻译
用于页面主导航区域(通常包含指向网站主要部分的链接的主菜单)的正确 HTML5 语义化标签是 <nav>。
使用示例:
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/services">服务项目</a></li>
<li><a href="/blog">博客</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
关键要点:
<nav>应用于主要导航区块(网站主导航)- 不需要为每个链接列表都包裹
<nav>标签。例如,页脚链接、面包屑导航或小型次要链接组通常不需要<nav>标签(除非它们代表重要的导航区块,否则使用<ul>或<div>即可) - 如果页面存在多个主要导航区域(例如页眉和页脚各有一个),则可以包含多个
<nav>元素,但主导航通常是指主菜单
可选的无障碍访问改进:
可以添加 aria-label 或 aria-labelledby 属性来描述导航用途,特别是在存在多个 <nav> 元素时:
<nav aria-label="主导航">
<!-- 链接 -->
</nav>
简而言之:<nav> 是用于主导航区域的标准 HTML5 语义化标签。