HTML/CSS Markup Skeleton (My Boilerplate)

What I use as of April 2012 by Dave Gauer

I'm going to try to keep this skeleton/boilerplate up-to-date as I continue to evolve my methods for the changing ways we access the Web. This will never be perfect, but it's what I currently use. Another excellent resource (and far more comprehensive) is HTML5Boilerplate.com.

I always use as many modern standards and "ideal" development methods as I can while still allowing older browsers to work fine. I always make my pages 100% standards compliant with whichever version of HTML (or XHTML when that was all the rage) and CSS I'm currently targeting. I've tried to make the pages as accessible as possible for users with disabilities. The semantic HTML markup helps with that a lot. It also allows minimalist devices and text-only browsers to work very well.

I've marked the places where I typically have a template system of some sort (server side, usually PHP) do some of the redundant work. These are marked like this. Things you'll definitely need to change for your site are marked like this.

Dec 2010 - Created
April 2012 - Added meta language and viewport tags, also print CSS

The HTML

<!-- start of header loaded from template -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>page title - your site name</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="page description">
  <meta name="author" content="your name">
  <meta name="keywords" content="keyword list,site-wide keyword(s)">
  <meta name="viewport" content="width=400, initial-scale=1">
  <meta http-equiv="Content-Language" content="en">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <link rel="image_src" href="/your 100x100 icon.png" type="image/png">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="stylesheet" href="/styles.css" type="text/css" media="all">
  <link rel="stylesheet" href="/styles_mobile.css" type="text/css" media="handheld,only screen and (max-device-width:480px)">
  <!-- logic to load page-specific CSS if needed -->
</head>

<body>

<div id="header">
  <!-- I have my site name here for screen readers, it is hidden in CSS -->
  <p>your site name</p>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/url 1">menu item 1</a></li>
    <li><a href="/url 2">menu item 2</a></li>
    <li><a href="/url 3">menu item 3</a></li>
    <li>Search:
      <!-- search box (such as a Google Custom Search) for your site -->
    </li>
  </ul>
</div>

<!-- end of header loaded from template -->

<div id="content"> <!-- start of page content -->

  <h1>page title</h1>
  <h2>page subtitle or section 1</h2>
  <p>introductory paragraph</p>
  <h3>sub section 1</h3>
  <p>paragraph, etc...</p>

</div>

<!-- start of footer loaded from template -->

<div id="footer">
  <p>your copyright message and links (about, contact, sitemap, etc.)</p>
</div>

</body>
</html>

<!-- end of footer loaded from template -->

The Stylesheet

Obviously, CSS styles are going to be very site-specific and much less objective than the HTML. Some people may also be put off by my preference for having as many one-line definitions as possible in my CSS. It's how I like it. Just try to imagine it with as much whitespace as you prefer.

At the very least, this basic CSS with the above HTML will create a readable page with fairly good consistancy across browsers. Feel free to look at the main stylesheet for this site if you like this page's appearance.

/* reset for these elements */
html, body, p {  padding: 0;  margin: 0;  font-size: 100%;  font-weight: normal;  font-style: normal; }
table { font-size: 1em; }
img { border: 0; }

/* basic styles */
html, body { line-height: 1.0; height: 100%; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; padding: 0; }
h1 { font-size: 1.75em; margin: 1em 0; }
h2 { font-size: 1.25em;  margin: 2em 0 1em 0; }
/* etc... */

/* monospace font-family list same as stackoverflow.com */
pre { font-size: 80%; font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif; }

/* anchor hover */
a:hover { background-color: #DDDDFF; } /* or underline or whatever you like */

/* table styles */
table { border-spacing: 0; border-collapse: collapse; margin: 1em; }
td, th { padding: 6px; margin: 0px; }


/* main layout structure and styling: header, content, and footer */

#header    { /* your header container styles */ }
#header ul { list-style: none; /* your menu styles */ }
#header li { /* your menu item styles (such as display: inline) */ }

#content { /* your content holder styles */ }

#footer { /* your footer container styles */ }