使用nav标签定义导航区域，内部用ul和li组织链接，添加aria-current指示当前页，结合aria-haspopup和aria-expanded处理下拉菜单，提升可访问性与SEO。
在构建网页时，导航栏是用户快速访问网站不同页面的关键部分。为了让结构更清晰、提升可访问性并利于SEO，使用语义化标签来布局HTML导航栏非常重要。语义化意味着用合适的HTML标签准确表达内容的含义，而不仅仅是追求视觉效果。
使用 nav 标签定义主导航区域
nav 是HTML5中专门用于定义页面导航链接区域的语义化标签。它告诉浏览器和辅助技术（如屏幕阅读器）这一部分包含主要的导航链接。
常见的应用场景包括：- 顶部主导航菜单
- 侧边栏导航
- 页脚中的站点地图或关键链接组
示例代码：
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/services">服务</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
用 ul 和 li 组织导航链接
虽然nav定义了导航区域，但内部链接应使用无序列表（ul + li）结构，这是语义化和可访问性的最佳实践。
立即学习“前端免费学习笔记（深入）”；
优势包括：- 明确表示一组相关链接
- 便于键盘导航和屏幕阅读器识别
- CSS样式控制灵活，易于实现横向或纵向布局
避免将多个独立的 a 标签直接放在 nav 中而不使用列表，那样会丢失结构信息。
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
为当前页面添加语义化状态
用户需要知道当前所处的位置。通过给当前页面的导航项添加特定类名，结合ARIA属性，可以增强语义表达。
- 使用 class="active" 表示当前选中项（常见于CSS样式）
- 添加 aria-current="page" 属性，为辅助技术提供明确提示
示例：
<li><a href="/about" aria-current="page" class="active">关于我们</a></li>
这样不仅视觉上高亮，也确保视障用户能“听”出当前位置。
响应式与多级导航的语义处理
对于下拉菜单或多层级导航，保持语义清晰尤为重要。
- 子菜单仍使用 ul > li > a 结构嵌套
- 用 aria-haspopup="true" 和 aria-expanded 表示可展开菜单
- JavaScript控制显隐时，同步更新ARIA状态
示例片段：
<li>
<button aria-haspopup="true" aria-expanded="false">服务</button>
<ul class="submenu">
<li><a href="/web-design">网页设计</a></li>
<li><a href="/seo">搜索引擎优化</a></li>
</ul>
</li>
基本上就这些。用 nav 包裹导航区域，内部用列表组织链接，配合合理的class和ARIA属性，就能实现既语义清晰又易于维护的导航结构。不复杂但容易忽略细节，尤其是可访问性方面的处理。
