HTML <nav> 标签：别把“导航”做成万金油

很多前端同学在重构旧项目时，习惯看到一组链接就顺手套上 <nav> 标签。这种直觉看似高效，实则容易埋下隐患。语义化从来不是为了讨好校验器通过检查，而是为了让人与机器之间的沟通更顺畅。如果把 <nav> 当成万金油，哪里能装链接就往哪贴，反而会削弱页面的逻辑清晰度。

<nav> 的核心定义非常明确：它代表包含站点级别或页面级别主要导航链接的区块。换句话说，它应该指向网站的其他核心区域，或者当前页面内的重要部分跳转。页脚那一排密密麻麻的版权信息、社交媒体图标，或者是商品详情页下方的“猜你喜欢”推荐链接，虽然也是超链接，但并不适合作为“导航”来处理。强行滥用这个标签，会稀释其在辅助技术和搜索引擎眼中的权重。

试着想象一下视障用户的浏览体验。当他们使用屏幕阅读器时，通常会通过快捷键在页面的地标（Landmarks）之间跳转。如果页面顶部有主菜单 <nav>，左侧有分类 <nav>，右侧有广告 <nav>，页脚还有更多 <nav>，用户在寻找“主导航”时会因为选项过多而陷入选择困难。关键是要控制数量，一个典型的单页面中，最重要的全局导航通常只需要一个 <nav>，其余次要的局部目录完全可以使用普通的无序列表或分区结构代替，无需画蛇添足。

从 SEO 角度来看，搜索引擎爬虫同样依赖结构来判断内容的重要性。清晰的 <nav> 能够帮助算法快速识别站点的层级关系，理解哪些是入口，哪些是内容主体。但这并不意味着只要加了这个标签就能提升排名。如果你在同一个 <nav> 里塞满了毫无关联的内部链接，或者试图用它堆砌关键词，反而可能触发反垃圾机制。保持链接的真实用途和相关性，远比单纯打上一个正确的标签重要得多。

在实际编码落地时，细节决定体验。当页面上存在多个导航块时，务必加上 aria-label 属性来区分它们的作用范围。例如，将顶部的品牌菜单标记为“主菜单”，而将文章内部的目录跳转标记为“本节索引”。这样做不仅符合 WAI-ARIA 规范，也能让辅助技术输出更精准的提示音。对于面包屑导航，虽然它有指引路径的作用，但在许多场景下直接放在 <div> 或 <ul> 中也足够清晰，不必为了追求完美语义而过度设计。

还有一个容易被忽视的场景是分页组件。部分开发者习惯把上一页、下一页放入 <nav>，理由是它们实现了翻页导航的功能。从严格的无障碍标准来看，这属于可接受的用法，但前提是必须做好标识，建议使用 aria-label="分页导航"，避免与顶部主菜单混淆。如果分页仅仅是作为内容流的一部分呈现，用普通的按钮或链接包裹也完全没问题，不必拘泥于标签形式。

写代码不仅是写给浏览器看的，更是写给未来的自己和团队协作人看的。规范的标签能让意图一目了然，降低后续维护的成本。当你半年后回看这段代码，或者接手别人留下的遗留系统时，良好的语义化习惯能让你迅速理清思路。真正的技术进阶，往往就藏在这些不起眼的标签选择之中。