Html <nav> 与<ul>导航栏

哪个更符合新的HTML5标准，用于网页上的导航栏，新的HTML5导航标签或将ul标签与css一起使用？

我认为是后者，因为更多的浏览器能够使用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>

谁能对此给出明确的答案？通过您的经验，哪个更适合用于网站？

老实说，两者都很好用。截至目前，还没有人真正在任何利用HTML5中新语义标签的Web浏览器中实现任何东西，而且许多标签既模糊又模棱两可，很多人不确定如何使用它们。该规范并没有真正清除太多。像<article>和<section>这样的标签可以以许多不同的方式使用（我应该将部分放在div中以达到视觉目的吗？特定部分标题的<h#>标签应该放在它里面还是就在它上面？为什么有些网站在图表中的部分旁边显示文章，但声明文章是网站的主要内容？）

目前，我正在尽最大努力简单地将<div>替换为更合乎逻辑的语义标签。在您的情况下，我会继续为您的链接使用<ul>，并将列表放在 <nav> 标签中而不是<div>标签中。

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

示例（直接取自 Mozilla 开发者网络页面的 nav 元素）：

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

延伸阅读：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document
http://html5doctor.com/lets-talk-about-semantics/
http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

阅读第三个链接我强烈建议通读所有三篇文章，但在我看来，第三个链接是必读的。它在指出我上面讨论的所有问题方面做得很好，并且可能会为您澄清事情（或至少指出缺乏清晰度）。第四个链接具体概述了如何使用该元素。

这里不会有绝对的答案，但这就是我处理这个问题的方式：

作为一名开发人员，我总是尝试使用最新的技术（在它经过公开测试和批准之后），无论是扩展到我如何编写HTML块的特定语法，还是如何为项目选择框架。话虽如此，我会建议你使用<nav>元素进行主导航。你是对的，<nav>是一个HTML5元素，只有支持HTML5的浏览器才能识别（在这一点上都是主要的，可以追溯到几个主要版本）。

所以。。。不支持HTML5的旧浏览器呢，更好的是，像IE <9这样的旧浏览器呢，它们甚至不能在页面上正确呈现HTML5元素？对于这些情况，我建议使用HTML5启用脚本 - 它使用"hack"或我喜欢说"IE修复"来确保即使这些浏览器（是的IE6 +）也能正确呈现您闪亮的新HTML5元素。

本文很好地总结了未知的HTML5元素，以及绕过旧浏览器兼容性的修复程序。

语义 CSS
HTML5 导航

我的答案是指上面的链接。许多意见是关于浏览器兼容性的。此外，我认为用户体验更重要。这种用户体验尤其适用于视听障碍者。当您使用导航时，他们的设备可以帮助他们轻松阅读页面。

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

例：

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

相关内容

最新更新

热门标签：