页眉和页脚标签是否应位于主标签内

Question

我正在使用main标记 - 我应该将标题和页脚标记放在主标记内还是应该分开？

此外，主标签是否需要role =“main”？

Answer 1

来自HTML5doctor文章The main element @Gaby又名G. Petrioli

TL;博士

经验法则：

• 每页只有一个<main>;
• 顶级元素（在大多数情况下）;
• 不要将您网站的标题/菜单/页脚（重复内容）放在<main>中。
如果具体，
• 可以保留文章页眉/页脚。

目的

  

＆lt; main＆gt;的主要目的是将ARIA的标志性角色主要**映射到   HTML中的元素。这将有助于屏幕阅读器和其他辅助   技术了解主要内容的开始位置。 W3C规范   描述为：

规格说

以下是the draft spec says：

  

主要内容区域包含与之直接相关的内容   或扩展文档或中心的中心主题   应用程序的功能。

页眉/页脚

Exclude site's header/footer/menu：

  

排除在一组文档中重复的内容，例如   网站导航链接，版权信息，网站徽标和横幅   和搜索表单（除非文档或应用程序的主要功能是   搜索表单。）

继续使用role='main'

但作为本文的旁注，史蒂夫·福克纳写道：

  

在所有浏览器将角色映射到之前，您仍应使用ARIA角色   ＆lt; main＆gt;元件。

Answer 2

因为它代表了页面的中心部分 - 如果你想要的话是“牛肉” - 页眉和页脚被认为是相邻的内容，我认为页眉和页脚不应该是子元素。

理论上，是的，使用<main>与添加role="main"的意思相同。但由于目前支持有限，请使用<main role="main"> is recommended。

Answer 3

查看规范，它有一个非常好的解释：http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

  

作者不得将主要元素作为文章的后代，包括页脚，页眉或导航元素包含

规范只提到main不能嵌套到任何提到的元素中，但没有提到任何相反的方式。我要说的是，在大多数情况下，header和footer应该与main完全分开。 main保存您的“主要内容”，页眉和页脚通常与之分开。

对于ARIA角色，它应该是隐含的，但目前，建议您手动赋予它角色。正如规范所说：

  

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