Advanced Search

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.

Expand | Embed | Plain Text

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.         <style>
  6. 	 /* Make HTML 5 elements display block-level for consistent styling */
  7. 	 article, aside, figure, footer, header, hgroup, menu, nav, section {
  8. 	  display: block;
  9. 	 }
  10.         </style>
  11. <script type="text/javascript>
  12. document.createElement("article");
  13. document.createElement("aside");
  14. document.createElement("figure");
  15. document.createElement("footer");
  16. document.createElement("header");
  17. document.createElement("hgroup");
  18. document.createElement("menu");
  19. document.createElement("nav");
  20. document.createElement("section");
  21. </script>
  22. 		<head>
  23. 		    <title><!-- Your Title --></title>
  24. 		</head>
  25.  
  26. 		<body>
  27. 			<header>
  28. 				<!-- ... -->
  29. 			</header>
  30.  
  31. 			<nav>
  32. 				<!-- ... -->
  33. 			</nav>
  34.  
  35. 			<div id="main">
  36.                                 <article>
  37. 				   <hgroup>
  38. 				      <h2>Post 1</h2>
  39. 				       <h3>This one's first</h3>
  40. 				    </hgroup>
  41. 				<p>...</p>
  42. 				</article>
  43. 			</div>
  44.  
  45. 			<footer>
  46. 				<!-- ... -->
  47. 			</footer>
  48. 		</body>
  49. 	</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.