Search code examples
htmlsemantic-markup

Should the <main> tag be inside <section> tag

Should <main> be considered something important to put inside <section>? Like having many articles with <main> 'article' in <section>? If not then how to use them together?

Solution

  • 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">
    <!-- [...] -->
</main>

    In short, the main element should be used whenever possible (but only once per page). 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> (note that declaring role="main" on a <main> element is not required by modern screen readers and user agents).