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

Mag*_*und 8 html html5 semantic-markup

我的问题是关于语义HTML5.

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

W3C规范说明了<main>标签:

"文档或应用程序正文的主要内容.主要内容区域包含与文档中心主题或应用程序中心功能直接相关或扩展的内容."


对我来说,这表明我应该像这样放置<nav>外面<main>:

<body>

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

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

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

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

</body>
Run Code Online (Sandbox Code Playgroud)


我还认为<main>标签可以在级别上使用<header>,<footer>并且有效地包含这两个标签之间的所有内容:

<body>

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

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

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

</body>
Run Code Online (Sandbox Code Playgroud)


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

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

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

我也感兴趣的是<aside>,在网站上重复并且与页面主题没有直接关系的侧边栏是否应嵌套在<main>标签中,但是我的图像将由我的主要问题的答案覆盖.

Bol*_*ock 21

<main>元素的基本思想是其中的内容被认为是文档的唯一内容(它适用于站点内各个文档的整个概念).

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

同样,对于与整个网站相关的任何内容,而不是特定于文档的内容,例如侧边栏.

需要明确的是,作为Kunaal Topraniu提到,你可以放置<nav>内的<main>,只要它是由导航是具体到的<main>内容,如表的内容.当然,站点范围的导航不是特定于内容的,因此不属于<main>元素.


Kun*_*niu 9

我相信你现在已经很久才解决了这个问题,但我想我还是要澄清一下.

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

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

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

<div id="mainPanel"> <!--(or whatever)-->
     <nav>
          <!--your nav-->
     </nav>
     <main>
          <!--main content-->
     </main>
</div>
Run Code Online (Sandbox Code Playgroud)

这在语义上是完全正确的.因为(我认为)你想要做的是将导航定位在某个地方,而不是真正改变导航和主要内容的含义,div实际上是正确的用法,因为divs不带语义.

编辑:我应该补充一点,我有条件地不同意一些规定声称nav应该在其中的回复header.由于header不考虑按W3C划分内容,这不仅经常是不必要的,而且在某些网站模型中完全不正确.