HTML5 template

June 4, 2010 by Merlin

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>

Shootout is over so here are some notes for those left standing. Doctype and <html> are a bit shorter then before. Markup inside the <head> element is pretty straightforward, except for the JavaScript. Internet Explorer, surprisingly, has different handling of unknown elements so this short script solves that problem (details in the resources later).

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>
  • Explanation why that script works that way in IE (btw the guy who provided the explanation, John Resig, is a JS evangelist for the Mozilla and the creator and lead developer of the jQuery JavaScript library)
  • HTML5 validator
  • HTML5.org
  • 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.

Tags:
Posted in Web