Code for HTML5/CSS Layout
Replacing HTML 4 (top) with HTML 5 (bottom)
Replacing this:
HTML 5 example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE HTML> <html> <head> <title>A sample HTML5 document</title> </head> <body> <header> <h1>Sample document</h1> </header> <section> <article> <h2>Subheading</h2> This is some of the content of the document. </article> <article> <h2>Subheading 2</h2> This is some more content, in a different section of the document. </article> </section> <footer> <a href="mailto:me@opera.com">Chris Mills</a> © 2009 </footer> </body> </html> |
Nothing has changed that radically—the elements are a bit different, but they reflect common semantics that you find on many websites that developers tend to create using <div> elements, for example <div id=”header”>, which is replaced with <header> in HTML5. You’ll also notice that the DOCTYPE is much simpler than the ones you saw earlier.
Try it yourself!
You can start experimenting with these new elements already, even though browsers don’t yet officially support them. All you have to do is write a rule in your CSS to make them all display as block elements. Try this out!
For HTML 5 to work on all browsers, you must add the following property to your CSS file.
|
1 2 3 |
article, section, aside, hgroup, nav, header, footer, figure, figcaption { display: block; } |
For HTML 5 to work with IE, you need to add this to the script below to the <head> of your HTML file.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> document.createElement('article'); document.createElement('section'); document.createElement('aside'); document.createElement('hgroup'); document.createElement('nav'); document.createElement('header'); document.createElement('footer'); document.createElement('figure'); document.createElement('figcaption'); </script> |