使用 nav 标签定义导航区域，配合 ul、li 和 a 构建列表结构，通过 aria-label 区分不同导航，提升可访问性与SEO，避免用 div 或 span 替代语义化标签。
在HTML中实现导航栏的语义化，关键在于使用合适的语义化标签来准确表达内容的结构和用途。语义化不仅有助于提升
代码可读性
，还能增强网页的可访问性与SEO效果。对于导航栏来说，正确的标签选择能让屏幕阅读器、
搜索引擎
更清楚地识别页面的导航区域。
使用 nav 标签定义主导航区域
nav
是HTML5中专门用于表示页面导航链接集合的语义化标签。它适用于主要的导航区块，比如顶部菜单、侧边栏导航、页脚中的链接组等。
常见使用场景包括：
网站主导航菜单（如首页、关于、服务、联系）
文章目录或分页链接
面包屑导航（breadcrumb）
并不是页面中每一个链接都需要放在
nav
中，它更适合成组的、重要的导航链接。
搭配 ul 和 li 构建导航列表
导航链接通常以列表形式组织，使用
ul
（无序列表）和
li
包裹每个导航项，是一种标准且语义清晰的做法。
立即学习
“
前端免费学习笔记（深入）
”；
示例代码：
这种结构清晰表达了“这是一组导航链接”，同时便于CSS样式控制和屏幕阅读器按列表方式朗读。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
为不同导航区域添加 aria-label 提升可访问性
如果页面中有多个
nav
区域（例如顶部导航和页脚导航），建议使用
aria-label
属性加以区分，帮助辅助技术用户理解每个导航的作用。
示例：
避免使用 div 或 span 替代语义标签
虽然用
div
加 class 也能实现视觉上的导航栏，但它缺乏语义信息。搜索引擎和辅助工具无法判断其功能，降低了网页的可访问性和结构清晰度。
应避免的写法：
这种写法没有传达出“这是导航”的含义，不符合语义化原则。
基本上就这些。用
nav
包裹导航链接，配合
ul/li/a
构建结构，辅以
aria-label
增强可访问性，是实现HTML导航栏语义化的最佳实践。不复杂但容易忽略。