Start Using Html5

There's a lot of hype going on about html5 nowadays. If you're not using html5 yet, the whole thing can be somewhat overwhelming. After reading this blogpost you'll be ready to upgrade your current project (or start a new one) using html5.

Understanding html5

I went to the bocaruby ruby users group earlier this month. I had some understanding of what html5 is capable of, but Diego Scataglini's presentation html5 a gentle introduction definitely expanded my knowledge. I recommend it as a solid introduction to what is different about html5.

Using html5

Often times after learning about a new technology a lot of programmers get stuck. This new functionality is great, but how I do I get started using it? It really helps to have something that gives you a little push.
enter html5-boilerplate
Its a frontend template written in html5 with a lot of goodness baked in from the start. Between the css, html, various server configuration files, javascript libraries and profiling, its a huge collection of sane defaults for any web project.
Some of its many features

Modernizr
html5 css reset
cross-browser compatible
cdn hosted jquery with local fallback
javascript profiling I particularly like how it handles ie specific styles.

        
<!doctype html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->

<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->

<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->

<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->

<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

view raw
            ie.html
            hosted with ❤ by GitHub

You end up with a ie-version class applied to the html tag, which allows you to do ie targeted css all in the same file. For example:

        
.ie6 body {

background-attachment: fixed;

}

//all in the same file!! no more additional files for ie!

.ie7 body {

background-attachment: scroll;

}

view raw
            ie-targeted-css.css
            hosted with ❤ by GitHub