This has actually been going on for several months now, but I still wanted to share this webmonkey article about the <main> element
For those wondering why a <main> element:
While HTML5 brought in new elements to mark up everything else on the page, there was nothing that clearly said (to AT, scrapers, and plugins like Readability, whose job it is to pull out the actual real content of a page and ignore all the other cruft) that “this is the point of this page”. Instead, software was expected to use what Bruce Lawson dubbed “the Scooby-Doo algorithm”: after seeing everything else on the page marked up as something else, like <nav> or <header> or <footer> or <aside>, the main content must be whatever’s left over. This “algorithm” would fail easily on pages where
- authors didn’t bother actually using all the other elements correctly; with <main>, they only need to get one tag right.
- where the “main” area is still mixed up with many <article>s with <header>s and whatnot, and <aside>s mixed in. Since a Scooby-Doo style algorithm would try to exclude those, no main content would be found. With a <main> element, you can now explicitly say “these articles and structural stuff inside are all considered the main content of this page”.
There was enough evidence that authors (we) would use main correctly, even more correctly than other elements (that is, authors are still using multiple <nav> elements per page, using <menu> for navigation, overnesting <section> and <article> because of a feeling that “divs 'r bad, mmkay?”) by looking at the class and id names generally given to divs containing what the author considered the main content.
Main does not affect the so-called “document outline” like <section> and <article> do. It merely lets software (and users of that software) know where on the page the content is that the authors consider the Whole Point. Ideally plugins and software like Readability would work even better with <main> elements. Of course <main> also has a landmark role, “main” for easier navigation by some AT users. The role existed first and the <main> element would now be mapped to it by default.
Unfortunately it’s a darn shame that you need to be using AT to navigate by landmark roles, arg.
An example.
<!doctype html>
<head>
<meta charset="utf-8">
<title>Foos and Bars</title>
<meta name="description" content="How Foos and Bars enhance our lives in a spiritual way.">
<link rel="stylesheet" href="css.css">
</head>
<body>
<header role="banner"> (very redundant in this case, pretend there's craploads of stuff in the header)
<p><a href="/"><img src="foobarco.png" width="80" height="80" alt="The Foo and Bar Company"></a></p>
</header>
<nav role="navigation">
<ul>
<li><a href="">blah</a></li>
<li><a href="">blah</a></li>
<li><a href="">blah</a></li>
<li><a href="">blah</a></li>
<li><a href="#products">To the product menu...</a></li>
</ul>
</nav>
<main role="main">
<section>
<header> (more redundancy but people like fancy new tags)
<h1>Foos and Bars: a case study</h1>
</header>
<p>blah blah...</p>
<section>
<header>
<h2>Foos</h2>
</header>
<footer>
<p>Written for FooBarCo by Elmo in 1996</p>
</footer>
<p>blah blah...</p>
</section>
<section>
<header>
<h2>Bars</h2>
</header>
<p>blah blah...</p>
<section>
<header>
<h3>Bar-Quuxes: a maze of twisty little passages</h3>
</header>
<p>more blah...</p>
</section>
</section>
</section>
</main>
<aside role="complementary">
<h2>Archive of FooBarCo articles</h2>
<h3>Feb</h3>
<ul>
<li><a href="">blah</a></li>
<li><a href="">blah</a></li>
...
</ul>
<h3>Jan</h3>
<ul>
<li><a href="">blah</a></li>
<li><a href="">blah</a></li>
...
</ul>
</aside>
<footer role="contentinfo">
<p>Stuff about contact info, address, copyright, blah blah...</p>
</footer>
</body>
</html>
Honestly the reason I don’t use section or article is because they’re almost always not needed, but if you’ve got lots of “boxing” divs grouping content then those would be it. There were questions like "why not just have <article role=“main”>? There’s still discussion of this, but <article> is a sectioning element (affects the document outline) while <main> is not, leaving the main content to have whatever outline the author was going for in the first place. Article is also seen has having hazy use cases: people are using them for everything. If you think about it, an article can be almost anything: people are sometimes using them for blog comments. Each comment an article? For some, why not? For others, wtf? Lastly, using a separate <main> element meant this element, meant to be used once per page (since that’s usually the case), can be mapped to the role of main natively. A native role means the element itself has that role by default (elements can have multiple roles). In the above example HTML, the main element would not need a role of main, and the nav element would not need a role of navigation. The other elements would need authors to specify their roles since not all headers would be the banner (there should be only one banner) etc. The advantage of native mapping then is users can get the benefits of roles even if the authors didn’t manually add them in.