<nav> 标签在 HTML5 中语义化表示导航区块，适用于页脚中“关于我们”等站点级辅助导航链接；应添加 aria-label 提升可访问性，避免滥用或嵌套，并优先于 <div> 以保障 SEO 和无障碍体验。
<nav> 标签在 HTML5 中语义化表示“导航区块”，它不局限于页眉，也完全适用于页脚——只要该区域包含一组主要的、用于网站全局或页面级跳转的链接。
页脚中使用 nav 的合理场景
页脚常见的“辅助导航”如：关于我们、联系我们、隐私政策、服务条款、常见问题、网站地图等。这些不是主要内容，但属于站点级重要入口，用 <nav> 包裹能明确告诉浏览器和辅助技术：“这是独立的导航区域”。
基础写法示例
直接将链接列表放入 <nav>，并建议添加 aria-label 提升可访问性：
<nav aria-label="页脚辅助导航">
<ul>
<li><a href="/about">关于我们</a></li>
<li><a href="/contact">联系我们</a></li>
<li><a href="/privacy">隐私政策</a></li>
</ul>
</nav>
</footer>
注意事项与建议
-
不要滥用：如果页脚只有几个孤立链接（比如仅“微信公众号”“微博”图标），没有明确导航意图，用普通
<p>或<div>更合适 -
避免嵌套多个 nav：整个页脚只需一个
<nav>包裹主导航组；若还有“关注我们”社交链接，可用<section>或带描述性aria-label的<div>分开 - 支持键盘与屏幕阅读器：确保链接有清晰文字（避免仅用图标），且顺序符合逻辑流（从左到右、从上到下）
-
CSS 控制样式即可：
<nav>本身无默认样式，用 CSS 实现横向排列、间距、悬停效果等，无需额外 class
为什么不用 div？
用 <div> 虽然也能实现视觉效果，但会丢失语义信息。搜索引擎和读屏软件无法识别其导航用途，影响 SEO 和无障碍体验。HTML5 的 <nav> 就是为此类结构而生的——简洁、准确、有意义。
立即学习“前端免费学习笔记（深入）”；
