Transitioning to HTML5
I’ll be the first to admit that I’ve been a little slow to adopt some of the new HTML5 elements. While always trying to be on the bleeding edge of what’s new in the world of technology, this is one thing that I’ve struggled staying on top of. This is finally starting to change as I take the soft approach to full adoption.
For starters, let’s clarify exactly what I’m talking about here. The ‘HTML5′ tree seems to have a lot of branches. When people talk about HTML5, they may be talking about a wide range of things:
- new semantic tags (nav, header, footer, etc)
- offline & online storage
- device access
- and even CSS3
I’ll be talking specifically about the new semantic elements and how they will effect my workflow. Here’s a basic structure as an example of a site that I would have built in 2010:
<div id="wrapper"> <div id="branding"> </div> <div id="main"> <div id="content"> </div> <div id="sidebar"> </div> </div> <ul id="main-navigation"> </ul> <div id="footer"> </div> </div>
To me, that’s a solid, clean structure. To be honest, I didn’t really see a reason why I needed to change. Unfortunately, that giant called Google slowly started disagreeing with me. As HTML5 becomes more established, Google will surely start to use the new tags in their search algorithms. When that starts to happen, you don’t want to be left behind.
Some of the new tags that I am going to implement:
Now, I had resisted implement some of these new tags into my sites because it felt so restrictive. The light finally clicked on inside my noggin and I realized it was really quite simple: IDs. Why would my structure even have to change? I could nearly just swap out my divs for new semantic tags, yahoo!
<div id="wrapper"> <header id="branding"> </header> <section id="main"> <article id="content"> </article> <aside id="sidebar"> </aside> </section> <nav> <ul id="main-navigation"> </ul> </nav> <footer id="footer"> </footer> </div>
[Update December 2013] – I thought it’d be good to revisit this post and provide an updated version of the standard code I’d use:
<div class="site-wrapper"> <header class="site-header" role="banner"> </header> <div class="site-main"> <main class="site-content" role="main"> </main> <div class="site-sidebar"> </div> </div> <footer class="site-footer" role="contentinfo"> </footer> </div>
We’ve replaced IDs with classes and added
role attributes to all appropriate elements as well as removed the
<section> element that didn’t quite match up with the spec.
And just like that I have a perfectly acceptable HTML5 document. The beauty about this? Nearly none of my CSS needs to change because everything is being targeted via IDs anyways.
We still need a couple things for Internet Explorer 8 and below to play nicely though:
- Gotta get these new tags to display as blocks! – HTML5 Reset
- HTML5 Shiv
With those two items IE will rock your new elements almost as if it were a real browser!