HTML nav 标签

HTML nav 语法

在 HTML 中,nav 标签用于定义网页中的导航链接,主要用于 3 个地方:顶部导航、侧栏导航、分页导航。

需要注意的是,当 nav 标签用于顶部导航时,nav 标签可以放到 header 标签内部,也可以放到 header 标签外部。具体放在哪里,取决于实际开发需求。

语法:

<nav>
    ……
</nav>

说明:

nav 标签内一般包含一个无序列表,或者多个 a 标签。一个文档中可以有多个 nav 标签。例如,一个用于主导航,另一个用于页脚的辅助导航。

HTML nav 摘要

属于 HTML 语义化
使用频率
兼容性 查看
官方文档 查看
MDN 查看

HTML nav 示例

一般情况下,主导航主要是使用无序列表来实现。在 HTML5 之前,都是使用一个 div 来包含着无序列表,而现在我们可以使用 nav 元素来代替 div 元素,以使得结构更具有语义。

以前的导航结构如下:

<div id="top-nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>

现在的导航结构如下:

<nav id="top-nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</nav>

此外别忘了,nav 元素并不只是可以用于顶部导航,还可以用于侧栏导航以及分页导航,如下图所示。

HTML nav标签用于顶部导航

HTML nav标签用于侧栏导航

HTML nav标签用于分页导航

HTML5 语义化标签

HTML5 新增了非常多结构性的语义化标签,以提高代码的可读性和利于 SEO,主要包括:

上一篇: header

下一篇: main

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号