Geek Answers Handbook

If the header and footer tags are inside the main tag

I use the main tag - should I put the header and footer tags in the main tag or should they be separate?

Also, is the main tag role = "main" needed?

+6
source share
3 answers

Since it is the center of your page - beef, if you want, and the headers and footers are considered related content, I would say that headers and footers should not be children.

In theory, yes, using <main> means the same thing as adding role="main" . But since it currently has limited support, it is recommended to use <main role="main"> .

+1
source

From HTML5doctor article Basic Element @Gaby aka G. Petrioli

TL; DR

General rule:

  • only one <main> per page;
  • top-level element (in most cases);
  • Do not put the site header / menu / footer (duplicate content) in the <main> .
  • may contain the title / footer of the article, if defined.

goal

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

Specs say

Here is what the draft shows :

The main content area consists of content that is directly related to or expanded on the central theme of the document or the central functionality of the application.

Header / Footer

Exclude header / footer / site menu :

excludes content that is repeated in many documents, such as links to the site, copyright information, logos and banners of the site and search forms (if the main function of the document or applications is not the search form).

Keep using role='main'

But as a note to this article, Steve Faulkner writes:

You should still use the ARIA role until all browsers have a <main> element.

+17
source

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

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

The specification only mentions that main cannot be nested in any of the elements mentioned, but says nothing about it. I would say that the header and footer in most cases should be completely separate from main . main contains your "main content", and the header and footer are usually separated from it.

Regarding the role of ARIA, it should be implicit, but it is currently recommended that you give it a role manually. As stated in the specification:

Authors recommend using the ARIA role = "main" attribute for the primary element until user agents implement the required role mapping.

+2
source

More articles:


All Articles