I recently wrote about 10 new HTML5 tags that folks should know about. A common and very fair question about this topic is, “what’s the compatibility like?” I put some of the tags to the test, and made a few sensible conversions to HTML5 on the site that I recently moved to static HTML. Although I did not test a huge swath of features, the results are positive.
The HTML5 Developer’s Cookbook
Let me start by explaining the background to this project. Part of my motivation for the CMS-to-static-HTML conversion a while ago was to make it easier to experiment with HTML5. Not long ago, the publisher of The HTML5 Developer’s Cookbook (by Chuck Hudson and Tom Leadbetter) offered to send me a copy of the book, and I accepted. (Disclaimer: I was given the book for free by the publisher for the purposes of reviewing it.)
If you have worked with HTML in the past and want to get caught up-to-date, I highly recommend this book. After I read it, I was really fired up about HTML5, and found myself doing a lot of soul searching about my current technology mix in the process; in fact, I will be using the next few months to do a lot more work with non-.NET technologies.
My HTML5 tag testing
Then I went for the much tougher test: IE 6. One of my favorite features in Expression Web is SuperPreview, which allows you to see how a page looks in different browsers side-by-side. While Microsoft has unfortunately allowed the support for Firefox to fall woefully behind and never seemed to add Chrome, Safari, or Opera, being able to at least see the various IE versions next to each other is critical. The results were terrible (Figure A).
Initial results with IE 9 on the left and IE 6 on the right. (Click the image to enlarge.)
It is not putting the <nav> and <aside> elements in the right place at all, so, what to do? Something I remembered from the book was the Modernizr library. I decided to give it a whirl, and I was pleasantly surprised. Their download section allows you to custom craft a copy of their library to be as minimal as possible. I opted for a no-frills version, without toggling anything on, and followed the instructions for adding it to the site. And… voila! The beauty that you see in Figure B is the result. The only visible difference between the two sites is that I’ve got the IE 6 detection code to put up the hideous “go upgrade” banner.
With a bare-bones Modernizr script added, IE 9 (left) and IE 6 (right) are nearly identical. (Click the image to enlarge.)
This is hardly a conclusive test — it is static HTML, after all. In the next several months, I am going to do a lot more work that is a lot more interactive (hints: Ruby on Rails, Haml, Sass, maybe even CoffeeScript), and I will be using HTML5 for it. Stay tuned!
Keep your engineering skills up to date by signing up for TechRepublic’s free Software Engineer newsletter, delivered each Tuesday. Automatically subscribe today!
More HTML5 resources on TechRepublic
- Form a learning plan for an HTML5 future
- Get coding advice with HTML5 Please
- Five online tools that simplify HTML5 coding
- Why HTML5 makes justifying native applications more difficult
- HTML5 vs. Flash: The state of the debate
- How to replace Flash and Silverlight with HTML5
- Poll: Will IE10 finally break the HTML5 logjam?
- Poll: Are you learning HTML5?