6

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?

3 Answers 3

10

From the HTML5 specs :

Authors must not include more than one main element in a document.

Authors must not include the main element as a descendant of an article, aside, footer, header or nav element.

The main element represents the main content of the body of a document or application.

So you should use main as a delimiter of your main content of your website and use article or sections inside main as a delimiter of context, here is a sample of how to handle main :

<main>

  <h1>Skateboards</h1>
  <p>The skateboard is the way cool kids get around</p>
  
  <article>
    <h2>Longboards</h2>
    <p>Longboards are a type of skateboard with a longer 
       wheelbase and larger, softer wheels.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Electric Skateboards</h2>
    <p>These no longer require the propelling of the skateboard
       by means of the feet; rather an electric motor propels the board, 
       fed by an electric battery.</p>
    <p>... </p>
    <p>... </p>
  </article>

</main>

NB : Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

3
  • 5
    The quote doesn’t include section.
    – unor
    Commented Dec 28, 2013 at 14:32
  • Yes, I still don't get how to get those two elements combined together.
    – Adam M.
    Commented Dec 28, 2013 at 15:52
  • The answer to your question seems to be no. You should not include main into sections/articles.
    – Xavier
    Commented Dec 28, 2013 at 20:57
5

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).

1
-1

The main tag should be for the main content on the page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.