<!-- If less than IE9, include the HTML5 shim --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Alright, now that we’ve considered older browsers we can get started with some actual HTML5 code. Starting from the very top, we need the doctype. Thankfully, the HTML5 doctype is simple compared to the ones you’re probably familiar with. Look at the beautiful simplicity of the document below:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Example</title> </head> <body> <p>This is a perfectly valid document</p> </body> </html>
Mmmmm, so much nicer than before…
What About Self Closing Tags?
One of the design choices that I really appreciate about HTML5 is the fact that you can optionally self-close tags. I plan to write my code without the self-closing slash, as I find it less noisy, but there is nothing wrong with self closing tags.
<!-- Totally valid --> <img src="path/to/img.jpg" alt="valid" /> <!-- Also perfectly valid (and less noisy) --> <img src="path/to/img.jpg" alt="valid" >
HTML5 gives us the ability create documents that are incredibly semantic. All the new elements were created with modern websites in mind, as you’ll see in the examples below:
<header> <h1>Large Title</h1> </header> <nav><ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul></nav> <section id="content"> <ul id="posts"> <li><article> <h3>Article Title</h3> </article></li> <li><article> <h3>Another Article Title</h3> </article></li> </ul> </section> <footer> <address>New York, New York/address> </footer>
That’s a very small example of what we can do with this new kind of markup. For a full explanation of all the new tags, checkout the official HTML5 specifications. It can be a little dry, but it’s worth slowly reading over.