Question

我应该如何编写导航栏，并考虑到语义？

我已被建议将所有内容嵌套在header中，然后在nav中嵌套链接，但我觉得这不是正确的做法。

<header>
<h3>Developer's Blog</h3>
    <nav>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">Press</a>
    </nav>
</header>

或

<nav>
<h3>Developer's Blog</h3>
    <div>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">Press</a>
    </div>
</nav>

哪一个是正确的？

Answer 1

nav元素当然是导航的正确选择。

其中的任何标题元素（h1 - h6）用于导航本身，而不是用于页面。所以像“导航”之类的东西。但如果它是唯一的导航，你通常不需要标题。

您可能希望在ul内使用nav，每个导航链接使用li。通过使用这样的块级元素，没有CSS支持的用户代理（例如，文本浏览器）每行显示一个链接;目前，您的链接将全部显示在同一行中。通过使用列表，屏幕阅读器用户可以选择导航导航。

如果nav成为您body的一部分 - header，则无法正常回答。两种方式都是可能的;这是标记选择的主观区域之一。

因此，典型/通用网站范围nav的HTML5标记为：

<nav>
  <ul>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
    <li><a href="/press">Press</a></li>
  </ul>
</nav>

导航栏的HTML5语义结构

1 个答案: