/ Published in: HTML
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
<!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <html> <style> /* Make HTML 5 elements display block-level for consistent styling */ article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> <script type="text/javascript> document.createElement("article"); document.createElement("aside"); document.createElement("figure"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("menu"); document.createElement("nav"); document.createElement("section"); </script> <head> </head> <body> <header> <!-- ... --> </header> <nav> <!-- ... --> </nav> <div id="main"> <article> <hgroup> </hgroup> </article> </div> <footer> <!-- ... --> </footer> </body> </html>