HTML Code Image

Using HTML5

The problem, as has long been the problem for web designers, is the IE sucks.

All the new elements and functionality that the HTML5 standard is trying to introduce are coming up against a brick wall when it comes to backwards compatibility.

So where does this leave us? Do we wait another 5 years until IE6 has disappeared but then IE7 and 8 both have no real support for HTML5?

Or do we find a way to force these conservative browsers to work somewhere near how they should, after all is this not what we did and have been doing with CSS for years.

When I first started using CSS on my sites an older an more experienced web designer told me not to bother as it was too time consuming and messy to use. He was right…at the time. But I persevered and within a year maybe even a few months I had left him behind. It took him a long time to make the transition and he never really caught up again. Last time I saw him he was on a PC in the corner of the room with Dreamweaver8, IE6 and a bunch of email campaigns to design.

Making the leap to HTML5

So how do we make the leap without feeling that we will lose 90% of our customers or customer’s customer base? Still with me?? Good.

Well that genius John Resig (the jQuery guy…you knew that didn’t you?) described in a blog post of his a brilliant little technique to helps IE ditch the Oasis hair cuts and start listening to The Drums.

The idea is that if you create the missing HTML5 elements in javascript BEFORE the page has rendered then IE sees them as valid markup and you can use them.

Example 1 (basically what is on John’s Site sorry John!)

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<!DOCTYPE html>
<head>
<style>
    header {
        background-color:red;
        color: white;
    }
</style>
<script type="text/javascript">
    document.createElement("header")
   </script>
</head>
<body>
    <header>Hello!</header>
</body>
</html>

See how to use HTML5 Demo

This is ok but John in his article calls for someone to take this further.

That someone is Remy Sharp.

Remy has come up with a tiny little js file that you can include at the top of your HTML file to create a lot of the layout elements in HTML5.

Example2 (basically the same as Remy’s.. sorry to everyone!)

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<!DOCTYPE html>
<head>
<style>
    header {
        background-color:red;
        color: white;
        }
 </style>
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
    <header>Hello!</header>
</body>
</html>

See Final Using HTML5 Demo CODE SNIPPET

So thats it for now. We can now use HTML5 elements on our page and IE will recognise what they are.

In my next posts I will be going through exactly what are the HTML5 tags and how can we use them starting with HTML5 Doctype.