Why wouldn’t you use HTML5?
Old content alert!
Thanks very much for visiting my blog. Always happy to have people read my stuff but just thought I should point out this post is years old. If it's about technical stuff there is a possibility that it is no longer relevant, if it's a bug report/fix I'm hoping that it should now have been fixed.
Of course if this is what you're looking for and it does work then great, just don't say I didn't warn you...
At work we’re about to start on a nice big project. The plan is to take our current codebase, strip out a ton of the cruft (the kind that grows and grows when the same code base is worked on for multiple years), improve the performance (due to various reasons JS has been turned off for IE7 users) and introduce a new front-end architecture based around data-contracts delivered from the back-end that are then parsed via our front-end templates. Our CSS and JS will be structured into neat and tidy modules loaded in as and when required opposed to loading in EVERYTHING at once as we’re going mobile-first in our design and development and care about our users because we’re nice conscientious developers. But we might not be using HTML5 (structural elements). I’m not totally sure how I feel about this.
For the sake of clarity in this article when I use the term HTML5 I am not referring to CSS3 (we’re all for progressive enhancement) and the JS API’s (we’re happy to use well supported polyfils) – I am referring to the new HTML5 structural elements. We’re most certainly going to be using most of the new hotness that gets bundled up with all talk of HTML5 now-adays and indeed this makes the reason that we’re not using all of it in many ways more galling to me.
Why not indeed?
I am again working for a big commercial business and we allow people from all over the world (we’re translated into over 40 languages) to use our site and IE8 is our 3rd most used browser; we still get a small number of IE7 users (who they actually buy a lot of hotels from us) and even support (in a rather basic manner) IE6 for users from China. As much as it hurts as a developer to think it we have to ensure that IE8 users still get as optimal experience as possible and deliberately not doing this leaves us with a potentially costly decision on our hands; the business might not really care if our code is as good and clean as it could be but the second it costs sales then the alarm bells with ring and we’ll need to provide our reasoning.
We know that it’s the ‘right thing to do’, that it’s 2014 and we should use the mark-up language with (hopefully) the longest shelf-life; we think it might help us with SEO (though I’ve not found any concrete evidence) and we can improve our page accessibility by embracing the new HTML5 document outlines. The question we’re got is if it’s really ‘worth it’ to use everything that HTML5 gives us and if the polyfils are acceptable enough for us.
At this point I’m outlining the solutions that I’ve used in the past – if there are other ones I’ve not considered please use the comments to let me know.
Use the HTML5shiv – https://github.com/aFarkas/html5shiv/
This is what I used at Mozilla and it worked great – but we were blessed with a user base where IE wasn’t one of our biggest users; and where it was with the modern and HTML5 friendly versions. It’s a super simple solution (just include the small JS file), is well used through-out the web, has a good community behind it (still accepting pull requests and responding to issues) and feels like it has been around long enough for me to feel confident in it’s quality. It isn’t a silver bullet however and makes any CSS applied to the new HTML5 elements it helps support be a JS-only feature for the browsers that need it – and this has never sat well with me.
Equally will it lead to a slight performance penalty (which could lead to less revenue) in the browsers that need as much of a helping hand as possible with their JS executon?
Use HTML5 but don’t use it
In the past I’ve used mark-up like
<div class="article"><article>I'm STILL an article</article></div> and then attach my CSS to the div elements as normal – and that works well in a cross-browser, no-JS fashion. The argument with this approach is that introduces a fair bit of code bloat to the project and looks a bit dirty. We could just remove the HTML5 tags if we’re not going to use them and go ahead as normal using divs for everything structural.
It gives us a nice option for progressive enhancement (styling the HTML5 elements can form another option for applying styles only to browsers who can support them) but at what real cost to our mark-up quality? Will the additional divs when used in conjunction with the existing ones leave us with more HTML-soup?
So what to do?
We have options – but none of them feel 100% solid. Do we just use them and ride the risk of IE8 users suffering, do we use them with caveats or do we just leave them out and continue as normal using divs (and maybe end up adding HTML5 elements retrospectively at a later date when the reasons for using them become more apparent)? What have other larger commercial companies done, what have YOU done?Tweet