Question

我的问题是关于语义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>标记中，但我我的主要问题的答案将涵盖的图像。

Answer 1

<main>元素的基本思想是文档中的内容被认为是文档的唯一内容（它适用于网站中单个文档的整个概念）。

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

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

要明确，正如Kunaal Topraniu所提到的那样，可以在<nav>内放置<main>，前提是它包含特定于{{1}的导航内容，例如目录。当然，网站范围的导航不是特定于内容的，因此不属于<main>元素。

Answer 2

我相信你现在已经很久才解决了这个问题，但无论如何我还是想澄清一下。

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

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

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

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

这在语义上是完全正确的。既然（我认为）你要做的是将导航定位在某个地方，而不是真正改变导航和主要内容的含义，div实际上是正确的用法，因为div不要不带语义。

编辑：我应该补充一点，我有条件地不同意一些明确声称nav应该在header中的回复。由于header不被视为每个W3C的分段内容，因此这不仅通常是不必要的，而且在某些网站模型中完全不正确。

Answer 3

标准的问题在于，许多人仍然在做错事情，并不真正尊重标准。甚至添加学校，他们仍然告诉我们导航需要放在页眉中，这真是可耻的是，新一代仍然无法正确使用他们的工作。到目前为止，这就是我的做法。

<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>

Answer 4

<nav> should be declared in this format:\

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

</main>

<footer>....</footer>

Answer 5

我已将导航放在标题中并且工作正常

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

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

5 个答案: