You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否使用HTML5语义化<nav>元素实现垂直侧边导航菜单?

使用<nav>构建垂直侧边导航完全符合规范

HTML5的<nav>元素核心是标记页面或站点内的主要导航链接集合,它的使用从未被限制为只能用于水平导航。你看到的“适用于水平场景”的说法,只是早期网页设计中水平导航更普遍,属于常见用法而非规范限制。

只要这个垂直侧边导航是用户访问站点核心区域、切换主要页面的入口,就完全适合用<nav>包裹。比如后台管理系统的侧边栏、文档站点的目录导航,都是<nav>的标准适用场景。

举个简单的垂直侧边导航示例:

<nav class="sidebar-nav">
  <ul>
    <li><a href="/dashboard">仪表盘</a></li>
    <li><a href="/orders">订单管理</a></li>
    <li><a href="/settings">系统设置</a></li>
  </ul>
</nav>

需要注意的是,如果只是页面内的次要辅助导航(比如侧边的相关文章链接),可能更适合放在<aside>元素中,但只要是主导航体系,无论水平还是垂直布局,<nav>都是语义化的正确选择。

内容的提问来源于stack exchange,提问作者Nick

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.24 20:02:02