< main>是否应标签位于< section>内部标签 [英] Should the <main> tag be inside <section> tag

问题描述

是否应该将<main>放在<section>中是否重要?就像在<section>中有很多带有<main>'article'的文章一样?如果没有，那么如何将它们一起使用?

Should <main> be considered something important to put inside <section>? Like having many articles with <main> 'article' in <section>? If not then how to use them together?

推荐答案

引用 HTML5规范:

建议作者使用ARIA角色=主要".主要属性 直到用户代理实施所需的角色映射为止.

Authors are advised to use ARIA role="main" attribute on the main element until user agents implement the required role mapping.

HTML5医生虽然有些过时，但确实提供了main元素的有用示例. /a>:

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完全相同. 在我的文章中了解有关WAI-ARIA角色的更多信息.例如:

In short, the main element should be used whenever possible (but only once per page), ideally with the role attribute set to main as well. Alternatively, you can use role="main" on a sectioning element with the exact same results in terms of WAI-ARIA. Read more about WAI-ARIA roles in my post. For example:

<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"的原因是很大程度上是由于当前用户代理对浏览器的支持不够.

I don't see how assigning the role="main" to a section element could be semantic at all, but there may be use cases. Generally, you'll want to use the article tag to identify main content. The above snippet provides the exact same semantic information as <main role="main">, and some may opt to use this method over the recommended <main role="main">, as it can be seen as redundant (note that the reason we are advised to declare role="main" is largely due to spotty browser support in current user agents).

这篇关于< main>是否应标签位于< section>内部标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！