使用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 中而不使用列表，那样会丢失结构信息。
为当前页面添加语义化状态
用户需要知道当前所处的位置。通过给当前页面的导航项添加特定类名，结合ARIA属性，可以增强语义表达。
- 使用 class="active" 表示当前选中项（常见于CSS样式）
- 添加 aria-current="page" 属性，为辅助技术提供明确提示
示例：
这样不仅视觉上高亮，也确保视障用户能“听”出当前位置。
响应式与多级导航的语义处理
对于下拉菜单或多层级导航，保持语义清晰尤为重要。
- 子菜单仍使用 ul > li > a 结构嵌套
- 用 aria-haspopup="true" 和 aria-expanded 表示可展开菜单
- JavaScript控制显隐时，同步更新ARIA状态
示例片段：
基本上就这些。用 nav 包裹导航区域，内部用列表组织链接，配合合理的class和ARIA属性，就能实现既语义清晰又易于维护的导航结构。不复杂但容易忽略细节，尤其是可访问性方面的处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
