How to Make All Browsers Render HTML5 Mark-up Correctly: Screencast
HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5’s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.
Here is a link to the written version of this tutorial: “How to Make All Browsers Render HTML5 Mark-up Correctly.”
Other Viewing Options
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Already re-developed my portfolio into HTML5, nothing great though, just for some semantic clarity & few bites of less code.
Came to know about the javascript fix couple of weeks ago from Remy Sharp’s blog & implemented. Now IE is sorted :)
That’s great! Thank you for this tip. :)
Wow !
That’s great !
Thanks !
You can also use the 52framework that already takes care of all the set up and let’s you start building on a cross browser html5 css3 platform :D
Really useful! I just wrote a post of how I have extended this idea further -> http://pushingbuttons.net/?Applying_CSS_to_Any_Custom_HTML_Tag
It seems that this method applies to any tag name, not only those in HTML5. You can create, let’s say, and apply CSS to this node in the same manner.
Great tutorial but what’s with all the mouth slapping sounds? it drives me a little nuts.
Nice video (and tutorial), although there is one thing missing for IE. By default the block elements also have ‘hasLayout = 1′ (IE only thingy) which in some cases is needed. A simple fix for this is adding “zoom: 1″ at the CSS for the HTML5 tags.
Because I hate to add this everytime at my code (both javascript and CSS) I created a very simple jQuery plugin which will do this for all the HTML5 elements automaticly: http://plugins.jquery.com/project/IE-HTML5