Purpose of the HTML5 main element

Question

I've been looking into HTML semantics lately and I was wondering what the real purpose of <main> is. I've created two scenarios shown below:

Scenario one

     <main role="main">
        <header role="banner">
           <hgroup>
              <h1>Header 1</h1>
              <h2>Header 2</h2>
           </hgroup>

           <nav>
              <ul>
                 <li><a href="#">Link 1</a></li>
                 <li><a href="#">Link 2</a></li>
                 <li><a href="#">Link 3</a></li>
              </ul>
           </nav>
        </header>

        <section role="region">
           <header>
              <h1>Articles</h1>
           </header>

           <article>
              <header>
                 <h1>Article name</h1>
              </header>

              <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

              <footer>
                 <a href="#" title="Read more">Read this post</a>
              </footer>
           </article>

           <footer>
              <a href="#" title="Read more">Read this articles</a>
           </footer>
        </section>

        <footer role="contentinfo">
           <p>Page last updated <time datetime="2009-11-04">November 4th, 2009</time></p>
           <address>
              <a title="Posts by Just A Name" href="#">Just A Name</a>
           </address>
        </footer>
     </main>

Scenario two

     <header role="banner">
        <hgroup>
           <h1>Header 1</h1>
           <h2>Header 2</h2>
        </hgroup>

        <nav>
           <ul>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
           </ul>
        </nav>
     </header>

     <main role="main">
        <section role="region">
           <header>
              <h1>Articles</h1>
           </header>

           <article>
              <header>
                 <h1>Article name</h1>
              </header>

              <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

              <footer>
                 <a href="#" title="Read more">Read this post</a>
              </footer>
           </article>

           <footer>
              <a href="#" title="Read more">Read this articles</a>
           </footer>
        </section>
     </main>

     <footer role="contentinfo">
        <p>Page last updated <time datetime="2009-11-04">November 4th, 2009</time></p>
        <address>
           <a title="Posts by Just A Name" href="#">Just A Name</a>
        </address>
     </footer>

Which one would be the best solution and why?

Answer 1

According to W3C , main should be used only for content that is unique to that document, so in your case the scenario #2 is the most appropriate.

The main element represents the main content section of the body of a document or application. The main content section consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Note: the main element is not sectioning content and has no effect on the document outline

The main content section of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).

Authors MUST NOT include more than one main element in a document.

Authors MUST NOT include the main element as a child of an article , aside , footer , header or nav element.

Answer 2

The <main> -element is used to indicate the primary (main) content of a page. If the role="banner" has significant meaning to the content, you should opt for scenario one , and two otherwise.

This describes/explains the <main> -purpose pretty well.

The first and foremost reason these elements ( <main> , <header> , <footer> , <section> , <article> , <nav> , <aside> ) were introduced is to indicate the significance to the document outline.

If you were to compile a chapter index of sorts, you'd want to look at the heading-elements within <main> and leave out the <nav> and <aside> portions. This is also the reason why html5 allows multiple <h1> elements, as their significance is determined based on the element they reside in (in contrast to HTML < 5, where the heading-elements themselves would indicate significance within the document).

Answer 3

Besides what is already answered, an important point taken from here is:

<main> doesn't contribute to the document's outline; that is, unlike elements such as <body> , headings such as <h2> , and such, <main> doesn't affect the DOM's concept of the structure of the page. It's strictly informative.

Answer 4

Those new HTML5 tags were created because they were used really often as <div id="header"> or <div class="footer"> so they were included, the way you use it, is up to you.

To tell the truth, I've even seen a big header, with an inside footer in it.

<header>
   <p>content...</p>
   <nav><ul><li>....</li></ul></nav>
   <footer>Some header footer content...</footer>
</header>

There are no such restrictions, are just tags.