According to HTML5 Doctor they are equivalent. <main>
just makes it easier and neater to implement role="main"
.
The primary purpose of is to map ARIA’s landmark role main to an element in HTML.
Here is a general description of the <main>
element.
The
main
element represents the main content of thebody
of a document or application. 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.
Recommendation
It is recommended to use use both <main>
and role="main"
in the same element until browsers implement <main>
properly.
<!-- Recommended -->
<main role="main">
...
</main>
Be sure to read the <main>
spec if you're interested.
Note on sectioning
As Szabolcs points out in the comments, <main>
is not a sectioning element so it should be used in conjunction with a <section>
element.