Enterprise Software

Getting HTML5 to work on a simple site

Justin James reviews The HTML5 Developer's Cookbook and describes using the Modernizr library to convert some features on his site to HTML5.

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.)

This book is an absolutely fantastic way for someone who already has a working knowledge of HTML (though is not necessarily an expert) to catch up with HTML5 technologies, including CSS3 and new additions to the HTML DOM that JavaScript can access. It was easy to read, the authors were respectful of my time (i.e., they did not bog down the book with pointless details), and the "cookbook" format makes it very easy to learn the tasks at hand and not force you to dig through things to find the nugget in a haystack.

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

I decided to start simple, since the site I am working on is very simple (there's no interactivity, multimedia, or even JavaScript on it) — all I wanted to do was bring it up-to-date using the <article>, <nav>, <aside>, <header>, and <footer> tags. It was easy for me to swap out the <div> tags with the new semantic tags where appropriate, because my HTML was already valid HTML5 code and the CSS was tag-agnostic. This only took me a few moments (Microsoft Expression Web's templates make this easy). I popped it open in IE 9 (if it is going to look wrong, IE is where it will be wrong), and it looked great as expected.

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). 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. Figure B

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.

More HTML5 resources on TechRepublic


Justin James is the Lead Architect for Conigent.

Editor's Picks