How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6


/ Published in: HTML
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3.  
  4. <html>
  5. /* Make HTML 5 elements display block-level for consistent styling */
  6. article, aside, figure, footer, header, hgroup, menu, nav, section {
  7. display: block;
  8. }
  9. </style>
  10. <script type="text/javascript>
  11. document.createElement("article");
  12. document.createElement("aside");
  13. document.createElement("figure");
  14. document.createElement("footer");
  15. document.createElement("header");
  16. document.createElement("hgroup");
  17. document.createElement("menu");
  18. document.createElement("nav");
  19. document.createElement("section");
  20. <head>
  21. <title><!-- Your Title --></title>
  22. </head>
  23.  
  24. <body>
  25. <header>
  26. <!-- ... -->
  27. </header>
  28.  
  29. <nav>
  30. <!-- ... -->
  31. </nav>
  32.  
  33. <div id="main">
  34. <article>
  35. <hgroup>
  36. <h2>Post 1</h2>
  37. <h3>This one's first</h3>
  38. </hgroup>
  39. <p>...</p>
  40. </article>
  41. </div>
  42.  
  43. <footer>
  44. <!-- ... -->
  45. </footer>
  46. </body>
  47. </html>

URL: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.