HTML中<nav>和<ul>用于导航栏，它们有什么区别？

Question

HTML中<nav>和<ul>用于导航栏，它们有什么区别？

6

使用哪种更符合新的HTML5标准，用于网页导航栏，是使用新的HTML5 nav标签还是使用带有CSS的ul标签？我认为后者更好，因为更多的浏览器能够使用HTML 4.01而不是HTML 5，尽管在最近几年这个差距可能已经缩小了一些。

 <!--HTML5 Way -->
 <!DOCTYPE html>
 <html>
    <body>
      <nav>
         <a href="/html/">HTML</a> |
         <a href="/css/">CSS</a> |
         <a href="/js/">JavaScript</a> |
         <a href="/jquery/">jQuery</a>
     </nav>

   </body>
 </html>

 /*CSS way*/
 #topmenudiv ul{
    margin: 0;
    padding:0;
 }

 #topmenudiv li{
    list-style:none;
    font-weight:bold;
    font-size:0.9em;
    border-right: 1px solid #990000;
    height: 100%;
    padding:10px 20px 12px 20px;
    float: left;
 }


 <body>
        <div id="topmenudiv">
            <ul>
                <li>News</li>
                <li>Sports</li>
                <li>Weather</li>
                <li>iPlayer</li>
                <li>TV</li>
                <li>Radio</li>
                <li>More...</li>
            </ul>
        </div>
</body>

有谁能给出一个明确的答案吗？根据您的经验，哪种更适合用于网站？

- Him_Jalpert

除非您要支持某些史前浏览器或IE8，否则请放心使用<nav>。请参见http://caniuse.com/#feat=html5semantic。 - user1864610

4个回答

2

这里并没有一个绝对的答案，但我会这样处理：

作为一名开发者，我总是尽量使用最新的技术（在经过公开测试和批准之后），无论是关于如何编写 HTML 代码块的具体语法还是选择项目框架。话虽如此，我建议您在主导航中使用 <nav> 元素。您是正确的，<nav> 是一个 HTML5 元素，只有支持 HTML5 的浏览器才能识别（目前所有主流浏览器都支持 HTML5，可以回溯到几个版本之前）。

那么......对于不支持 HTML5 的旧浏览器呢？更好的是，对于甚至不能正确渲染HTML5元素的旧浏览器（如 IE ＜9）呢？对于这些情况，我推荐使用HTML5启用脚本——它使用“hack”或者我喜欢说的“IE修复程序”，以确保即使这些浏览器（没错，包括IE6+）也能正确地渲染您的新型 HTML5 元素。

这篇文章总结了一些未知 HTML5 元素以及解决旧浏览器兼容性问题的方法，讲得很清楚。

- Alex

1

语义化 CSS
HTML5 导航栏

我的回答涉及以上链接。很多观点都关于浏览器兼容性。而我认为用户体验更加重要。这种用户体验特别适用于视听障碍人士。他们的设备可以帮助他们轻松阅读页面，当您使用导航栏时。

- Todd Mark

0

你必须将 <ul> 放入 <nav> 中。

例如：

<header>
    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact us</li>
        </ul>
    </nav>
</header>

- drymisty

3

没有必须的事情！ :) - David Waters

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chuck Dries · Accepted Answer

说实话，两者都一样好。目前为止，在任何网页浏览器中都没有真正实现利用HTML5中新语义标签的内容，许多标签既模糊又含糊，很多人不确定如何使用它们。规范并没有解决太多问题。像

和

这样的标签可以以许多不同的方式使用（我应该在div中放置部分以进行视觉效果吗？特定部分的标记应该放在其中还是以上方？为什么有些网站在图表中显示文章和部分，但声明文章是网站的主要内容？）

目前，我正在尽力用更合理的语义标签替换

，只要有意义。在您的情况下，我将继续使用

标记内而不是

标记内。

需要牢记的是，在实践中，所有的HTML5语义标签行为都与标准无意义的<div>标签完全相同，并旨在替换它。非HTML5浏览器将像对待<div>一样处理<nav>和其他新元素。

以下是来自Mozilla Developer Network页面关于nav元素的示例:

<nav>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
</nav>

更多阅读：

请阅读第三个链接 我强烈建议阅读这三篇文章，但在我看来，第三个链接是必读的。它很好地指出了我上面讨论的所有问题，并可能为您澄清事情（或至少指出缺乏明确性）。第四个链接特别概述了如何使用<article>元素。