<main>标签是否应该在<section>标签内

Question

是否应该将

<main>

视为重要的东西放入

<section>

内？喜欢在

<main>

中有很多带有

<section>

“文章”的文章吗？如果不是那么如何一起使用它们？

Answer 1

来自 HTML5 规范 :

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

作者不得将主要元素包含为某个元素的后代 文章、旁白、页脚、页眉或导航元素。

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 Spec：

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

HTML5 doctor 虽然有点过时，但确实提供了

main

元素的有用示例:

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

简而言之，应尽可能使用

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>

）。

Answer 3

从语义角度来说，将这些部分放在主部分中而不是将主部分放在该部分下确实很有意义。

Answer 4

主标签应该用于页面的主要内容。