Browser optimize

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!

J.Ja

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

About

Justin James is the Lead Architect for Conigent.

6 comments
harrywilsokenll
harrywilsokenll

Good info of the html tags. But i would ask a question that will these tags be compatible with Internet Explorer which do not support HTML3

dstoltz
dstoltz

I agree with kpbarry - and I'll go further - I didn't think anyone used MS Expression- after all, it seems like Microsoft totally copied from Adobe's Dreamweaver, in almost every way - guess they had to do something to get away from Frontpage. Might as well copy from something that works well....but that begs the question, why not just use Dreamweaver....?

kpbarry
kpbarry

Anyone using it doesn't deserve to be on the Web.

Justin James
Justin James

That's one of the things that Modernizr does, is add support for the new tags to older browsers. J.Ja

Justin James
Justin James

It's been some time since I used Dreamweaver, but to say that Expression Web copies it is painting the world with a fairly broad brush... it would be hard to make a good HTML editor that isn't an awful lot like Dreamweaver in many ways. That said, Dreamweaver costs a small fortune, while I have a free license to Expression Web, which goes a long way to making my mind up. It's the same reason why I use Expression Design for my small vector arts needs instead of buying Illustrator (and yes, Expression Design feels a lot like Illustrator... just like Expression Blend feels a lot like Flash... there's only one way to skin certain cats). J.Ja

Justin James
Justin James

... that they are still out there on the Web. I'm not going to cut off my nose to spite my face if the fix is fairly simple. J.Ja