Blog

Safe Ways to Code a Site in HTML5 Now

Web Design
Ross Johnson Ross Johnson

I will be the first to say that it is questionable if HTML5 is really a realistic technology to use at this point. In most instances there is no reason to use a technology that is not widely supported when we have good options that are. That being said there are reasons to use HTML5, such as:

  • If you know your site is predominantly web designers or earlier adopters
  • You have other technology that can take advantage of the improved semantics
  • You need to use ARIA and want it to validate

So given that you do feel a need to use HTML5 it is important to do so in a way that actually functions cross-browser. There are a few different techniques for doing so, each with their own advantages and disadvantages.

1. Use the HTML5 DocType

The easiest way is to simply use the HTML5 DocType and MetaCharset. This is the simplest way to create a HTML5 document, a little change of code and you are ready to go. Instead of using the standard XHTML or HTML DocType you replace it with:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

Advantages

  • You can now use ARIA and validate
  • Even non-modern browsers will render things properly

Distadvantages

  • Using the new tags (<section>,<article>, <header>, etc…) will break on older browsers and Internet Explorer 8 and below

2. Use Javascript for IE

As it turns out most browsers when confronted with a tag they don’t understand the behavior of they simply treat it as a block level element. This is perfect for the use of HTML5, as we can now start using the new semantic tags and apply styles to them as needed. Even though the browser may not understand what a <nav> element is natively, we can use it for all intensive purposes through CSS.

There is a hitch of course, one browser doesn’t treat unrecognized tags as block level elements. Instead this browser simply ignores them, preventing us from applying any styling to them at all. You guessed it, the browser in question is Internet Explorer.

This leaves us in a situation where you can code an HTML5 document, however in Internet Explorer it will end up looking like completely unstyled content. Not ideal considering the high percentage of users who are still on IE.

One work around that has been presented is the use of Javascript to create the elements in internet explorer. The HTML5 enabling script will cause Internet Explorer to create all the new elements available in HTML5 so that you can style them like any other element.

The code to use it is simple and straight forward:

<!--[if lt IE 9]>
     <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Advantages

  • Simple and easy
  • Minimal amount of additional code, no additional HTML markup
  • You can use all the new elements in HTML5

Disadvantages

  • IE users who have javascript turned off will see a very, very ugly website…
  • Questionable support on other less common browsers (mobile, etc…)

3. Wrap HTML5 elements with a <div>

There is a more full proof approach that will let you use the latest HTML5 elements, ARIA and still be compatible with older browsers (including IE of course). It is a simple concept, so much so you may be kicking yourself for not thinking of it earlier (I know I was). All you have to do is use the HTML5 elements as wrappers for DIVs, and then you style the DIVs.

The idea is that the HTML5 elements are block level with out any styling, if you wrap a div with an ID of header in a <header> tag and then style the #header element all of the browsers will render it properly. Even though Internet Explorer will ignore the <header> element they will see the <div>. This example should illustrate the concept:

<header>
   <div id="header" class="header">
     <nav>
       <ul id="main-navigation" class="nav">
          <li><a href="/">Home</a></li>
       </ul>
     </nav>
   </div>
</header>

So as you can see every time you have an HTML5 element such as <nav> or <header> you have a supported element such as a <div> or <ul> that you can style cross browser as a backup. I recommend using HTML5 naming conventions on the related element class as to make it easier to distinguish which supported HTML element is being used as the backup for the HTML5. For example the <div> that will be styled for the <header> element, simply give it a class name of “header.”

Advantages

  • Pretty fail safe, all browsers will be able to use this
  • You can use ARIA and all HTML5 elements

Disadvantages

  • You end up doubling your mark-up anywhere that there are HTML5 elements

Any Other Methods?

Know of any other methods to publish HTML5 documents in a safe and compatible way? Let me know, I may add them to this post or to a follow up blog post.