Should the header and footer tags be inside the main tag
Solution 1:
From HTML5doctor article The main element @Gaby aka G. Petrioli
tl;dr
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.
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:
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
Exclude site's header/footer/menu:
excludes content that is repeated across a set of documents such 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'
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.
Solution 2:
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.
Solution 3:
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
Authors must not include the main element as a descendant of an article, aside, footer, header or nav elem
The spec only mentions that main can not be nested into any of the mentioned elements, but doesn't say anything about the other way around. I'd say, that the header and footer should be completely separate from the main in most cases. main holds your "main content", and the header and footer is usually separate from that.
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:
Authors are advised to use ARIA role="main" attribute on the main element until user agents implement the required role mapping.