html5 NAV TAG 正确使用答案

【问题标题】：html5 NAV TAG proper usagehtml5 NAV TAG 正确使用
【发布时间】：2011-08-09 20:54:46
【问题描述】：

我已经开始在我的页面上使用 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>

【问题讨论】：

标签： html navigation nav

【解决方案1】：

您发布的代码不是最佳做法。应该是：


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

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

【讨论】：

感谢您的帮助。我很可能会将我的 div 转换为 ul/li。不过，我担心 ie7 对 nav 标签的支持。
那么你会想要使用这样的 shiv：
谢谢大家，你们的帮助最大。 =)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

-1。有一个实际的区别，使用屏幕阅读器的人依赖列表来导航页面，自动化工具可能会使用它们来构建结构，搜索引擎可能会在索引页面时出于各种原因使用它们，等等。