Html 页眉和页脚标签是否应该在主标签内

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20470345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:24:48  来源:igfitidea点击:

Should the header and footer tags be inside the main tag

html

提问by panthro

I'm using the maintag - should I put my header and footer tags inside the main tag or should they be separate?

我正在使用main标签 - 我应该将页眉和页脚标签放在主标签内还是应该分开?

Also, does the main tag need role="main"?

另外,主标签是否需要 role="main"?

采纳答案by janfoeh

Since it represents the central part of your page - the "beef" if you want - and headers and footers are considered adjacent content, I would argue that headers and footers should not be child elements.

由于它代表了页面的中心部分——如果你愿意的话,“牛肉”——并且页眉和页脚被认为是相邻的内容,我认为页眉和页脚不应该是子元素。

In theory, yes, using <main>does mean the same as adding role="main". But as it has limited support at the moment, using <main role="main">is recommended.

理论上,是的, using<main>确实与添加role="main". 但由于目前支持有限,<main role="main">建议使用.

回答by édouard Lopez

From HTML5doctor article The main element@Gaby aka G. Petrioli

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

tl;dr

tl;博士

Rule of thumb :

经验法则:

  • only one <main>per page ;
  • top-level element (in most cases) ;
  • don't put your site's header/menu/footer (repeated content) in your <main>.
  • can hold article header/footer if specific.
  • <main>每页只有一个;
  • 顶级元素(在大多数情况下);
  • 不要将您网站的页眉/菜单/页脚(重复内容)放在您的<main>.
  • 如果特定,可以保存文章页眉/页脚。

Purpose

目的

The primary purpose of <main> is to map ARIA's landmark role main** to an element in HTML. This will help screen readers and other assistive technologies understand where the main content begins. The W3C spec describes as representing:

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

Specs says

规格说

Here is what the draft spec says:

这是规范草案的内容

The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

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

Header/footer

页眉页脚

Excludesite's header/footer/menu:

排除网站的页眉/页脚/菜单

excludes content that is repeated across a set of documentssuch as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).

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

Continue to use role='main'

继续使用 role='main'

But as a side note to this article Steve Faulkner write:

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

You should still use the ARIA role until all browsers map the role to the <main> element.

在所有浏览器将该角色映射到 <main> 元素之前,您仍应使用 ARIA 角色。

回答by Nix

Check out the spec, it has a pretty good explanation on it: http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

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

Authors must not include the main element as a descendant of an article, aside, footer, header or nav elem

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

The spec only mentions that maincan not be nested into any of the mentioned elements, but doesn't say anything about the other way around. I'd say, that the headerand footershould be completely separate from the mainin most cases. mainholds your "main content", and the header and footer is usually separate from that.

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

As for the ARIA-role, it should be implicit, but for the time being, it is recommended that you give it the role manually. As the spec says:

至于ARIA-role,应该是隐式的,但暂时还是建议手动给它角色。正如规范所说:

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

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