<main>标签是否应位于<section>标签内

Question

应该<main>考虑放入重要的东西<section>吗？像有很多带<main>“文章”的文章<section>？如果没有，那么如何一起使用？

Answer 1

根据HTML5规范：

作者在文档中不得包含多个主要元素。

作者不得将main元素作为文章的后代，aside，footer，header或nav元素包括在内。

main元素表示文档或应用程序主体的主要内容。

因此，您应该将main用作网站主要内容的分隔符，并将main中的文章或部分用作上下文的分隔符，这是如何处理main的示例：

<main>

  <h1>Skateboards</h1>
  <p>The skateboard is the way cool kids get around</p>

  <article>
  <h2>Longboards</h2>
  <p>Longboards are a type of skateboard with a longer 
  wheelbase and larger, softer wheels.</p>
  <p>... </p>
  <p>... </p>
  </article>

  <article>
  <h2>Electric Skateboards</h2>
  <p>These no longer require the propelling of the skateboard
  by means of the feet; rather an electric motor propels the board, 
  fed by an electric battery.</p>
  <p>... </p>
  <p>... </p>
  </article>

</main>

注意：鼓励联合使用该元素的内容时，请使用article元素而不是section元素。

Answer 2

再次引用HTML5 规范：

建议作者在主元素上使用 ARIA role="main" 属性，直到用户代理实现所需的角色映射。

HTML5 doctor 虽然有些过时，但确实提供了一个有用的main元素工作示例：

<main id="content" class="group" role="main">
    <!-- [...] -->
</main>

简而言之，main应该尽可能使用该元素（但每页只能使用一次），理想情况下，role属性也设置main为 。或者，您可以role="main"在切片元素上使用 WAI-ARIA 获得完全相同的结果。 在我的帖子中阅读有关 WAI-ARIA 角色的更多信息。例如：

<div class="main-content-column">
    <article role="main" id="content">
        [...]
    </article>
</div>

我根本看不出如何将 分配role="main"给section元素是语义上的，但可能有用例。通常，您需要使用article标签来标识main内容。上面的代码片段提供了与 完全相同的语义信息<main role="main">，有些人可能会选择使用此方法而不是推荐的<main role="main">，因为它可以被视为多余的（请注意，我们建议声明的原因role="main"主要是由于当前用户对浏览器的支持参差不齐代理）。