<nav> 标签应该在 <main> 标签之外吗？答案

【问题标题】：Should a <nav> tag be outside the <main> tag?<nav> 标签应该在 <main> 标签之外吗？
【发布时间】：2014-04-28 06:56:54
【问题描述】：

我的问题是关于语义 HTML5。

如果主导航不是设计的标题的一部分，但仍然是站点范围的，那么它是否应该嵌套在 <main> 标记中？

W3C 规范声明了<main> 标签：

“文档或应用程序正文的主要内容。主要内容区域由与文档中心主题或应用程序中心功能直接相关或扩展的内容组成。”

对我来说，这表明我应该将<nav> 放在<main> 之外，如下所示：

<body>

  <header>
    [...]
  </header>

  <nav>
    [...]
  </nav>

  <main>
    [...]
  </main>

  <footer>
    [...]
  </footer>

</body>

我还知道<main> 标签可以与<header> 和<footer> 一起使用，并有效地包含这两个标签之间的所有内容：

<body>

  <header>
    [...]
  </header>

  <main>
    <nav>
      [...]
    </nav>
    [...]
  </main>

  <footer>
    [...]
  </footer>

</body>

哪一个在语义上更正确？有关系吗？

<main> 标签上的所有最可靠来源都可以通过将主导航嵌套在标题中或使导航与内容直接相关来方便地避免示例中的问题。

我想这可能会带来多少设计应该决定语义标记？

我还对在整个网站上重复出现且与页面主题没有直接关系的侧边栏 <aside> 是否应该嵌套在 <main> 标记中感兴趣，但我认为这将是涵盖了我的主要问题的答案。

【问题讨论】：

标签： html semantic-markup

【解决方案1】：

标准的问题在于，许多人仍然做错了事，并不真正尊重标准。即使加上学校，他们仍然告诉我们导航需要在标题中，这真是令人遗憾的是，新一代仍然不正确地应用他们的工作。到目前为止，我就是这样做的。

<html>

<head></head>

<body>
  <!-- HEADER -->
  <header>
    <div class="banner" role="banner"></div>
  </header>
  
  <!-- NAV -->
  <nav>
    <div class="brand"></div>
    <div class="menu" role="menu"></div>
  </nav>
  
  <!-- CONTENT -->
  <main>
    <section class="container"></section>
    <section class="container"></section>
    <section class="container"></section>
  </main>
  
  <!-- FOOTER -->
  <footer>
    <div class="copyright"></div>
  </footer>
  
</body>

</html>

【讨论】：

没有规定<nav> 元素应该在标题内部或外部。请看对应的MDN文档：developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

【解决方案2】：

<main> 元素的基本思想是其中的内容被认为是文档独有的（这适用于站点内单个文档的整个概念）。

由于站点范围的导航应该存在于整个站点中，它应该存在于<main> 元素之外。

同样适用于与整个网站相关的任何内容，而不是特定于文档的内容，例如侧边栏。

明确地说，正如 Kunaal Topraniu 所提到的，您可以在 <main> 中放置 <nav>，前提是它包含特定于 <main> 内容的导航，例如目录。当然，站点范围的导航不是特定于内容的，因此不属于 <main> 元素。

【讨论】：

【解决方案3】：

我相信你现在已经解决了这个问题，但我想我还是要澄清一下。

由于<main> 元素应该用于您网站的主要、独特的内容，如果它是整个网站的导航，则您的<nav> 不应包含在其中。但是，您可以在 <main> 中添加 <nav>，例如，如果您有页面内容或与内容相关的导航，例如内容部分的锚点。

但是，如果您将 <nav> 用于您的主要站点范围导航，并且它不属于您的标题 - 例如，如果您使用侧边栏导航 - 我会做这样的事情：

<header>
     <!-- header stuff -->
</header>

<div id="mainPanel"> <!--(or whatever)-->
     <nav>
          <!--your nav-->
     </nav>
     <main>
          <!--main content-->
     </main>
</div>

这在语义上是完全正确的。因为（我认为）您想要做的是将导航定位在某个地方，而不是真正改变导航和主要内容的意思，所以 div 实际上是正确的用法，因为 divs 不带有语义.

编辑：我应该补充一点，我有条件地不同意一些规定nav 应该在header 中的响应。由于header 不被视为按照 W3C 划分内容，这不仅通常是不必要的，而且在某些网站模型中完全不正确。

【讨论】：

【解决方案4】：

<nav> should be declared in this format:\

<header>
<nav>....</nav>
</header>
<main>
<nav>....</nav>

</main>

<footer>....</footer>

【讨论】：

【解决方案5】：

我已将 nav 放在 header 中，效果很好

<body>
<header>
<nav>
  [...]
</nav>
[...]
</header>
<main>
[...]
</main>
<footer>
[...]
</footer>
</body>

【讨论】：

所以问题在于它妨碍了我的设计风格；导航根本不在标题中。我可以通过为样式添加额外的 div 来解决这个问题，但是当我要进行语义标记时，这似乎违反直觉。
这个标记有什么问题？ <header> 不等于 <div role="header"> 吗？将 <nav> 嵌套在 <header> 中会在 W3C HTML 验证器中进行验证。