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?
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 thebody
of a document or application. Themain
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 outlineThe
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 applicationsmain
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 anarticle
,aside
,footer
,header
ornav
element.