Question

是否应将<main>视为放入<section>内的重要内容？就像在<main>中有很多包含<section>'文章'的文章一样？如果没有，那么如何一起使用它们？

Answer 1

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

作者不得将主要元素作为后代包含在内   文章，旁边，页脚，标题或导航元素。

主要元素代表文档正文的主要内容   或申请。

所以你应该使用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, though somewhat outdated, does provide a useful working example of the main element：

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

简而言之，应尽可能使用main元素（但每页只能使用一次），理想情况下也应将role属性设置为main。或者，您可以在切片元素上使用role = "main"，其结果与WAI-ARIA完全相同。 Read more about WAI-ARIA roles in my post。例如：

<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"主要是由于当前用户代理中的浏览器支持不稳定。）

Answer 3

主标签应该是页面上的主要内容。

<main>标记应该在<section>标记</section> </main>中

3 个答案: