HTML5 main element versus ARIA landmark role="main"
I'm interested to learn more about the relationship, and possible distinctions, between the HTML5 <main> element, and the ARIA landmark role attribute role="main".
I'm under the impression that the purpose of the <main> element is to map the ARIA roll attribute role="main" onto a specific HTML element. But does that sum it up?
Are there benefits to using <main> over, say, <div role="main">? Or will these, for now and the foreseeable future, yield the same result?
Any insights in comparing the following examples would be greatly appreciated:
<body>
<main>
<p>Paragraph</p>
<main>
</body>
<body>
<main role="main">
<p>Paragraph</p>
<main>
</body>
<body>
<div role="main">
<p>Paragraph</p>
<div>
</body>
Answer
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
mainelement represents the main content of thebodyof 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.