Supporting HTML5 elements without JavaScript

HTML5 is the newest standard for HTML development, it has a range of additional features that will change the way we interact with the web. This is great for web development, there is a problem though, older browser versions specifically IE 6, 7 and 8 do not support the new HTML5 elements so that you cannot attach CSS to those elements.

Fortunately Sjoerd Visscher, Remy Sharp and John Resig amongst others have promoted a technique in mitigating this problem by using JavaScript to create a new DOM element of the same name as the required HTML 5 element, this then allows the browser to attach CSS to the element.

The fundamental problem of this though is that you are reliant on JavaScript for this to work and if the new elements have a structural role in the design then your design is going to fall apart.

There are a couple of HTML only solutions to this problem although they are not as elegant as the JavaScript solution.

The first is to wrap your HTML5 element within an additional div, this div then takes the styling the new HTML5 element would have had. The benefit of this is that you get your semantic HTML5 element but at the price of an additional tag for each new element, effectively watering down the semantic meaning and increasing the code density on the page.

<div id="navigation">
  <nav>
    <ul>
      <li><a href="#"></a></li>
    </ul>
  </nav>
</div>

Another option is to serve different code using conditional comments. The benefit is that you have control over what is rendered by which browsers, the price though will be a large number of conditional comments littered throughout your code creating an additional weight of download and increasing the render time.

<!--[if lt IE 9]><div id="navigation"><![endif]-->
<!--[if IE 9]><nav id="navigation"><![endif]-->
<!--[if !IE]><nav id="navigation"><![endif]-->

After discussing this with @willhowat an alternative method would be to remove the new elements entirely and reference them through a reserved classname. It’s benefit is to remove any additional tags used to structure the page and by attaching the classname the element can be programmatically referenced. Of course the price is you initially lose access to these semantic elements.

<div id="navigation" class="navigation">
  <ul>
    <li><a href="#"></a></li>
  </ul>
</div>

By referencing the classname it would be possible to switch HTML elements server side, having the same effect as the conditional comments but without the inherent price. Failing that when the older versions of IE finally fades away it would be possible to manually swap out the code.

<nav id="navigation">
  <ul>
    <li><a href="#"></a></li>
  </ul>
</nav>

Summary

HTML5 isn’t just about the new elements, there are a range of additional features that constitute the standard but the three methods shown here are a viable alternative to using JavaScript to bridge the gap in support for older browser versions.

The issue of JavaScript support may restrict the elements we can use but this shouldn’t restrict adoption of HTML5 as the primary development standard.

Which technique you choose is up to your requirements but until a different technique arises or the majority of web users upgrade to a browser version that natively supports these elements, if i need to serve a HTML5 page that’s design needs to work without JavaScript I’ll be using the reserved classname technique for it’s simple elegance.

5 Responses to Supporting HTML5 elements without JavaScript

  1. Ross Bruniges says:

    I like the first method (indeed I think that is what we’re using at nature.com) but would strongly recommend AGAINST using those conditional comments – can you imagine what your files would look like with all those conditionals in there; the term ‘mother of all fuck-ups’ comes to mind :)

  2. George Paterson says:

    Yeah the conditional comments would create epic page bloat on a complex site but it is still an option people may want to pursue.

    The difference between the first and third option is tricky but i don’t like the bastardised nature of the first option. With this particular problem i may secretly be a fan of server side browser detection.

Comment on Supporting HTML5 elements without JavaScript

Your email address will not be published.

You may use these HTMLtags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>