Question

在HTML5草案规范中添加了<main>元素，这是更正确的页面布局吗？

<body>
    <header> ... </header>
    <main>
        <aside> ... </aside>
    </main>
    <footer> ... </footer>
</body>

或

<body>
    <header> ... </header>
    <section>
        <main> ... </main>
        <aside> ... </aside>
    </section>
    <footer> ... </footer>
</body>

Answer 1

关于每个示例标记模式的正确性的答案可以在主要元素的normative definition中找到。

可以使用此元素的上下文：预计流量内容，但没有文章，旁边，页脚，标题或导航元素的祖先。作者不得在文档中包含多个主要元素。

在这种情况下，示例标记符合要求。仅凭理论实例很难知道哪种是最合适或最实用的。

以下是哪些规格的浏览器？

浏览器已经实现了W3C HTML specification中定义的主要元素。 W3C HTML validator等一致性检查器将实现W3C HTML规范的一致性要求。

注意：在不久的将来，主要元素将是added to HTML 5.0。

注意： HTML 5.1中主要元素的规范取代了扩展规范。

Answer 2

一如既往地取决于内容。

对我来说，如果header和footer的内容对所有网页都是通用的，那么请将它们留在main元素之外，该元素的内容应该特定于该页面。但是，如果header和/或footer仅与该网页的主要内容相关，请将它们放在main内。

同样的逻辑适用于aside元素。

另请阅读Steve Faulkner在此页面上所说的内容。他知道一切！

更新！ 由于这个特殊问题，我发布了一个article，其中包含有关如何使用main元素的更多示例。

Answer 3

在第二个示例中，您放置了＆lt; main＆gt;在＆lt; section＆gt;内。

由于＆lt; body＆gt;隐式地是“部分”和＆lt;部分＆gt;属于它，＆lt; section＆gt;事实上 - 是一个小节。

这会导致问题。

为什么？

史蒂夫指出，你只能使用＆lt; main＆gt;每页一次。在此示例中，您已选择使用在该页面的子部分中定义页面的 main 部分的one元素。

某些东西的“主要”部分肯定不属于那个东西的子集。无论您根据当前规范“允许”做什么，这根本没有意义。在此示例中，您对＆lt; main＆gt;的部署与您使用切片内容所描述的结构意图不一致。

在结构方面，第一个例子 - 因此 - 稍微优越，尽管你的语义选择＆lt; aside＆gt;不是最理想的。你基本上已经说过，“这是我页面内容中最重要的部分，而且它是一些切向的，松散相关的东西”。切入什么？

除非......

您打算将一些流内容直接放在＆lt; main＆gt;中区域，与＆lt; aside＆gt;相邻。此内容将直接属于main，它直接属于＆lt; body＆gt;。＆lt;旁边＆gt;仍然是＆lt; body＆gt;的一个子部分。并且实际上是对某些主要内容的“撇开”。

这听起来很完美。

哪个页面布局更正确？

3 个答案: