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.