导航栏的 HTML5 语义结构 [关闭]答案

【问题标题】：HTML5 semantic structure for a navbar [closed]导航栏的 HTML5 语义结构 [关闭]
【发布时间】：2016-04-08 20:52:09
【问题描述】：

我应该如何在考虑语义的情况下对导航栏进行编码？

有人建议我将所有内容嵌套在 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>

哪一个是正确的？

【问题讨论】：

在后者中，您的 h3 是导航部分的标题。这是你想要的吗？
这只是一个例子，我可能会使用较小字体大小的 h1。
从语义上来说，这没什么区别。

标签： html navbar semantic-markup

【解决方案1】：

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

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

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

如果nav 应该是您的body-header 的一部分，则通常无法回答。两种方式都可以；这是标记选择更主观的领域之一。

因此，典型/常见站点范围内的 HTML5 标记 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>

【讨论】：

不会有任何观众会使用文本浏览器，我对此非常确定。 h1 元素怎么样？我应该如何实施？这是一个典型的导航栏，左侧有徽标，右侧有链接。
@noczesc：取决于h1 的用途。如果它是站点名称（例如徽标），则它不应该是 nav 元素的一部分。对于该标题，最近的部分应该是 body 元素。如果您想要该导航的标题（例如“导航”），只需将其放在 nav 中的任何位置。
让我举个例子 - prntscr.com/apx558 就是我想要的。
@noczesc：如果您的意思是“开发者的博客”：这似乎是站点名称，所以它应该是 body 分区根目录中的 h1。不要把它放在nav 中。所以与部分相关的元素将是：<body><h1>Developer’s Blog</h1> <nav></nav> <article><h2>IT Teams: Luxury or Necessity?</h2></article> </body>