videos

How to Make All Browsers Render HTML5 Mark-up Correctly: Screencast

on Jan 15th 2010 with 7 comments

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

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://wevlop.com deb

    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 :)

  • http://www.grezlikowski.pl Łukasz Gręźlikowski

    That’s great! Thank you for this tip. :)

  • http://sonergonul.com Soner Gönül

    Wow !

    That’s great !

    Thanks !

  • http://52framework.com Angel Grablev

    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

  • http://www.duzodesign.com Timothy

    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.

  • rommie

    Great tutorial but what’s with all the mouth slapping sounds? it drives me a little nuts.

  • http://johan.notitia.nl/ Johan de Jong

    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