With all that HTML5 buzz lately everyone wants to try it out. So if you’re one to shoot first and ask questions later, here is one simple template.
<!DOCTYPE html> <html lang="en"> <head> <title>This is a valid HTML5 template.</title> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <link rel="shortcut icon" href="/favicon.ico" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> </head> <body> <header> <h1>My title</h1> <nav> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> </header> <!-- content goes here --> <footer> <p>Links, copyright, date ...</p> </footer> </body> </html>
The body uses some new semantic elements. They are put here totally arbitrarily. You can shift the navigation beneath the header or remove the footer completely. Note that these new elements are not mandatory. We could have used <div id=“something”> instead of them and this would still be valid HTML5.
Few links for more details and resources:
- HTML5 enabling script from the <head>
- HTML5 validator
- Dive into HTML5 - an online book in the making by Mark Pilgrim in which you can more comfortably read about HTML5 spec found in the above link.