html5 NAV TAG正确使用

Question

我已经开始在我的页面上使用 html 标签，并且我正在尝试确定 NAV 标签的正确用法。 我已经阅读了文档，似乎我应该可以接受我所拥有的，但我注意到大多数其他开发人员在“ul”“li”标签中都有他们的导航“块”。 我用过div。

我的问题是，使用“ul”“li”标签而不是 div 的优点/缺点是什么？

以下内容是否适用于导航？

<nav>
    <div id="navBar">
        <div id="navItem1"><a></a></div>
        <div id="navItem2"><a></a></div>
        <div id="navItem3"><a></a></div>
        <div id="navItem4"><a></a></div>
    </div>
</nav>

Answer 1

您发布的代码不是最佳实践。 它应该是：

<nav>
    <ul>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
    </ul>
</nav>

<ul>和<li>标签比使用div标签更好，并且几乎总是用于菜单。 通过使用ul s 和li s，你不会用太多的 ID 阻塞你的代码。

Answer 2

列表 (ul, ol) 在可访问的浏览器（屏幕阅读器等）中可以具有其他含义，而 div 则没有。 这使这些用户更容易使用您的网站，这也是菜单首选列表的原因之一。

此外，正如其他人所说，列表标签为内容提供了一些上下文（菜单是链接列表），而 div 没有上下文。

Answer 3

按照惯例，导航栏被认为是链接列表，因此是 ul-li。 没有实际的区别，只是一种常见的做法

你在做什么很好，也许我会直接用 nav#navBar 替换 div#navBar，以降低动画级别