Quoting the HTML5 Spec again:
Authors are advised to use ARIA role="main" attribute on the main element until user agents implement the required role mapping.
HTML5 doctor, though somewhat outdated, does provide a useful working example of the main
element:
<main id="content" class="group" role="main">
<!-- [...] -->
</main>
In short, the main
element should be used whenever possible (but only once per page), ideally with the role
attribute set to main
as well. Alternatively, you can use role="main"
on a sectioning element with the exact same results in terms of WAI-ARIA. Read more about WAI-ARIA roles in my post. For example:
<div class="main-content-column">
<article role="main" id="content">
[...]
</article>
</div>
I don't see how assigning the role="main"
to a section
element could be semantic at all, but there may be use cases. Generally, you'll want to use the article
tag to identify main
content. The above snippet provides the exact same semantic information as <main role="main">
, and some may opt to use this method over the recommended <main role="main">
, as it can be seen as redundant (note that the reason we are advised to declare role="main"
is largely due to spotty browser support in current user agents).