How Semantic Can We Get With HTML 5?

html

Solution

It won't be 10+ years. That time period is for "final completion", all browsers support all parts of the spec. It's due to become a candidate late this year, early next, and hopefully approved by 2011/2.

I'm phasing it it in where I can, right now. How much I use depends on audience, but since IE share has been falling constantly, what they don't support is no longer a killer, especially as John Resig's "HTML5 shiv" lets the semantic tags play even in IE6 with js turned on.

More importantly, I'm starting to shift my thinking into HTML5 lines, using classes today for what will become HTML5 tags tomorrow (div class="nav"). That way I'll be more used to thinking in HTML5 terms when the opportunity arises.

Problem

This is a community wiki that asks the question, "Just how semantic can our HTML markup get thanks to HTML 5?" Below You can find the source code of a sample HTML 5 page. The object is to make a very usable, accessible, style-able webpage using as few classes and IDs as possible. Also, when do you plan to start implementing HTML 5? Are you going to wait 10+ years until the draft is finalized, or are you going to be an "early adopter" now that browser support is rapidly growing? ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Site Name &bull; Page Title</title> </head> <body> <nav> <h1><a href="/">Site Name</a></h1> <ul> <li><a href="#">Nav Link</a></li> <li><a href="#">Nav Link</a></li> <li><a href="#">Nav Link</a></li> </ul> </nav> <header> <p>Welcome to the site!</p> <a href="#">Call to action!</a> </header> <section> <aside> <!-- Sidebar --> </aside> <article> <header> <h2>Article Name</h2> <p>Posted by <cite>Kerrick Long</cite> on <time datetime="2009-06-21">June 21</time>.</p> </header> <p>Lorem ipsum dolor sit amet...Aliquam erat volutpat.</p> <figure> <img src="/images/eclipse.jpg" width="640" height="480" alt="Solar Eclipse" /> <label>Here we can see the solar eclipse that happened <time datetime="2009-05-28">recently</time>.</label> </figure> <p>Lorem ipsum dolor...</p> </article> </section> <footer> <p>&copy; <time datetime="2009-01-01">2009</time>, <cite>Site Owner</cite></p> </footer> </body> </html> ```

Original source