Question

哪种更符合用于网页导航栏的新HTML5标准，新的HTML5导航标签或使用带有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>

有人可以给出明确答案吗？通过您最好用于网站的经验？

Answer 1

老实说，两者同样有效。截至目前，没有人真正在任何利用HTML5中新语义标签的网络浏览器中实现任何功能，而且很多标签都含糊不清，很多人不确定如何使用它们。该规范并不是很清楚。像<article>和<section>这样的标签可以用很多种方式使用（我应该在div中放置部分用于视觉目的吗？如果特定部分标题的<h#>标记进入内部它或者只是在它之上？为什么有些网站会在图表中显示文章，但是说文章是网站的主要内容？）

目前，我正在尽力将<div>替换为更合理的语义标记，只要它有意义。在您的情况下，我会继续使用<ul>作为您的链接，并将列表放在<nav>标记内而不是<div>标记内。

重要的是要记住，在实践中，所有HTML5语义标记的行为都与标准无意义的<div>完全相同。 非HTML5浏览器会处理<nav>和其他新元素，例如<div> s。

您的示例（直接取自Mozilla Developer Network page for the nav element）：

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

进一步阅读：

阅读第三个链接 我强烈建议阅读所有三篇文章，但在我看来，第三个链接必须阅读。它很好地指出了我上面讨论的所有问题，并且可能会为你澄清一些事情（或者至少指出缺乏清晰度）。第四个链接具体概述了如何使用该元素。在将来，我建议在询问之前咨询MDN以获得任何类似的问题，这样可以节省大量时间等待回复。

Answer 2

这里没有绝对的答案，但这就是我如何处理这个问题：

作为一名开发人员，我总是尝试使用最新技术（经过公开测试和批准后），是否扩展到我编写HTML块的特定语法，或者我如何为项目选择框架。话虽这么说，我会鼓励你使用<nav>元素作为主导航。你是对的，<nav>是一个HTML5元素，只有支持HTML5的浏览器才能识别（此时这些都是主要的，返回几个主要版本）。

那么......那些不支持HTML5的老浏览器呢，甚至更好的是IE等旧浏览器呢？ 9，甚至没有在页面上正确呈现HTML5元素？对于这些情况，我建议使用HTML5 enabling script - 它使用“hack”或者我喜欢说“IE修复”以确保即使这些浏览器（是的IE6 +）也能正确呈现闪亮的新HTML5元素。 / p>

This article总结了未知的HTML5元素，以及解决旧版浏览器兼容性的修复工作。

Answer 3

的 semantic css

的 HTML5 nav

我的回答是指上面的链接。很多意见都与浏览器的兼容性有关。此外，我认为用户体验更重要。这种用户体验特别适用于视听残障人士。当您使用导航时，他们的设备可以帮助他们轻松阅读页面。

Answer 4

您必须将<ul>放入<nav>
例如：
<header> <nav> <ul> <li>Home</li> <li>About</li> <li>Contact us</li> </ul> </nav> </header

Html <nav> vs <ul>用于导航栏</ul> </nav>

4 个答案: