The Perfect Page Markup

21 April 2011

For the transition to HTML5 and inspired by the HTML Boilerplate project, i wrote my own perfect page markup.

The Code

<!DOCTYPE html>
<html lang="en-au">
<head>
  <meta charset="utf-8">
  <title>{TITLE}</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="{DESCRIPTION}">
  <meta name="author" content="{AUTHOR}">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="{FAVICON}">
  <link rel="apple-touch-icon" href="{FAVICON_MOBILE}">
  <link rel="stylesheet" href="{STYLESHEET}">
  <script src="{LIBRARY_SEED}"></script>
</head>
<body>
  <div id="cont" role="document">
    <div class="cont-inner">
      <div id="hd" role="banner">
        {HEADER}
      </div>
      <div id="bd" role="main">
        {BODY}
      </div>
      <div id="ft" role="contentinfo">
        {FOOTER}
      </div>
    </div>
  </div>
  <script src="{CONFIG}"></script>
</body>
</html>

The Explaination

For both work and play, I use YUI as my prefered javascript library. It’s a 6kb hit in the header, but it caches and add’s a ‘js-enabled’ class on the <html> element, so you’ll never get a flash of unstyled js content. That should be the only javascript block in the header; the configuration javascript file sits at the end of the page.

The id’s used are mainly for javascript hooks than for styling purposes.

I also believe in using landmark roles to define areas of the document. Once IE6 dies a horrible death, you can also use these for styling through div[role="banner"].

Matt Sain

Ramblings of a developer, designer and child subscribe

This blog is a public GitHub repository. If you find an error I will not be surprised... but if you fork and edit the blog and send me a pull request you'd be pretty awesome in my book.

Featured Repos