我的问题是关于语义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>
标签中,但我的图像将由我的主要问题的答案覆盖。
<main>
元素的基本思想是文档中的内容被认为是文档的唯一内容(它适用于站点内各个文档的整个概念)。
由于整个站点应该存在站点范围的导航,因此它应该存在于<main>
元素之外。
同样,对于与整个网站相关的任何内容,而不是特定于文档的内容,例如侧边栏。
要明确,正如Kunaal Topraniu所提到的,你可以在<nav>
中放置一个<main>
,前提是它包含特定于<main>
内容的导航,例如目录。当然,站点范围的导航不是特定于内容的,因此不属于<main>
元素。
我相信你现在已经很久才解决了这个问题,但我想我还是要澄清一下。
由于<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
s不带语义。
编辑:我应该补充说,我有条件地不同意一些规定声称nav
应该在header
的回应。由于header
不被视为每个W3C的分段内容,这不仅经常是不必要的,而且在某些网站模型中完全不正确。
标准的问题在于许多人仍然做错了,并不真正尊重标准。即使添加学校,他们仍然告诉我们导航需要在标题中真正令人遗憾的是,新一代仍然错误地应用了他们的工作。这就是我到目前为止的做法。
<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>
我已将导航设置在标题内,并且工作正常
<body>
<header>
<nav>
[...]
</nav>
[...]
</header>
<main>
[...]
</main>
<footer>
[...]
</footer>
</body>
<nav> should be declared in this format:\
<header>
<nav>....</nav>
</header>
<main>
<nav>....</nav>
</main>
<footer>....</footer>