Should the header and footer tags be inside the main tag

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

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


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.

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


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.

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.


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.

Check out the spec, it has a pretty good explanation on it:

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.

Need Your Help

How change position of popup menu on android overflow button?

android popup android-actionbar android-menu

I just like to implement somethings same as popup menu in the Gmail app, anchored to the overflow button at the top-right. for that I used the same code as google tutorial for android Android popup...

iOS App testing: No Code signature found

ios testing ipod

I do not have iPhone developer account.