Results 1 to 4 of 4
Feb 6, 2013, 02:43 #1
- Join Date
- Aug 2007
- 50 Post(s)
- 2 Thread(s)
Main element joins HTML draft-- webmonkey
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.
<!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>