Will my website work with downstream browsers that don't support html5 if I use it for my layout?

Question

I want to lay out a website with html5 semantic markup. I'm wondering; if I use html5 and style the sections like I do with html4, will it still render properly? I don't want to use really up-to-date html5 stuff like canvas, I just want to future proof this site.

Answer 1

You can do this by using HTML5 Boilerplate.

It comes with Modernizr (which includes html5shiv), and a lot more as well.

html5boilerplate.com

Answer 2

You can definitely do this with the use of a shim - this will allow you to use all the HTML5 semantic tags and will convert them for older browsers. Check out html5shim here: http://code.google.com/p/html5shim/

and just include it in your code how they show:

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

Answer 3

Any HTML5 specific tags (such as <nav> or <header>) will be ignored by the browser. The raw tags won't appear on the page (you won't get the word <nav> appearing or etc), but they simply won't do anything. Note that any styles applied to them also won't work - I found this out the hard way. If you want to style a nav bar, then don't style the <nav> tag; style the <div> or similar tag inside it.

As for HTML5 'utilities' such as <video> or similar, you're better off using a Javascript library that detects the browsers capabilities and uses the appropriate code. Jplayer, for example, allows you to embed video and audio that uses HTML5 if available, and Flash if not, while still using the same HTML interface.

If you want a really show-off feature like a Canvas-powered system, then it's best not to use this for the main area of your site, and just add a little note saying "Please upgrade to a modern browser to view this properly" if you can detect it's not working (which is possible by using var check=document.createElement('canvas') then checking whether the value is undefined.