HTML5 导航栏的语义结构

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) 都用于导航本身，而不是用于页面。所以像 "Navigation" 这样的东西。但如果它是唯一的导航，您通常不需要标题。

您可能想在 nav 中使用 ul，每个导航 link 都有一个 li。通过使用像这样的 block-level 元素，没有 CSS 支持的用户代理（例如，文本浏览器）每行显示一个 link；目前您的 link 将全部显示在同一行中。并且通过使用列表，屏幕 reader 用户有更多选项来 navigate 导航。

如果nav应该属于你的body-header一般无法回答。两种方式都可以；这是标记选择中比较主观的领域之一。

所以 HTML5 typical/common site-wide nav 的标记将是：

<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 导航栏的语义结构

HTML5 semantic structure for a navbar

html

semantic-markup

navbar