Question

我不确定<main>元素与网站侧边栏的关系，并希望得到一些指导，或者至少是社区多数人的共识。 ;）给出以下页面元素：

<body>
    <header>Logo and stuff</header>
    <nav>Main Nav</nav>
    ...
    <footer>Copyright blah</footer>
</body>

如果替换<main>，应该如何安排...元素和侧边栏元素？

选项1：

<main>
    <article>...</article>
    <div class='sidebar'>Sidebar</div>
</main>

选项2：

<main>
    <article>...</article>
</main>
<div class='sidebar'>Sidebar</div>

选项3：

  #####
 #     #
       #
    ###
    #

    #

Answer 1

来自MDN :(强调我的）

<main>元素的内容对于文档或文件应该是唯一的元素包含的部分。在一组中重复的内容文档或文档部分，例如侧边栏，导航链接，版权信息，网站徽标和搜索表单不应该是包括，除非搜索表单是页面的主要功能。

所以选项2似乎是惯用的选择。

Answer 2

如果您正在讨论HTML5语义，那么div类sidebar在语义上毫无意义。（因为所有div都是）

但是，在HTML5中，您通常会使用标记<aside>，而不的标记应位于main标记内，因为它被视为提供其他信息。因此，您可能应该将.sidebar div转换为<aside>元素并将其移出main元素。