HTML5 and CSS3 Boilerplate Page Layout Code
We are building websites using HTML5 and CSS3. It can be done fairly easily. When “Googling around” for HTML5 “boilerplate” page examples we found a lack of layout advice and information. It seemed no one wanted to go farther than these types of examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
HTML 5 boilerplate
</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
</code>
Notice the conditional statement [if IE]? This code calls a JavaScript if the Internet Explorer browser is detected. Hosted on googlecode.com, this “shiv” (or "shim") was created because IE doesn’t understand the HTML5 elements “abbr, article, aside, audio, bb, canvas, datagrid, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time and video”. The JavaScript uses the Document Object Model (DOM) and creates the elements for IE browsers at page render so that they can be styled with CSS.
document.createElement('header');</code>
The problem is that the shiv didn’t handle PNG images and other IE rendering issues. If you decide to go this route, we suggest that you instead use the following code for IE 9 and below:
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
However, that was not our choice.
We opted instead for the newer “modernizr” JavaScript library ( www.modernizr.com ) that adds classes to the <html> element which allows you to target specific browser functionality in your stylesheet. You don't actually need to write any JavaScript to use it. Just include the modernizr-1.5.min.js JavaScript file in your page and add a class of "no-js" to your <html> element. After it automatically executes, you'll be able to use the Modernizr JavaScript object and the various CSS classes it'll attach to the html element. We also added a call to the jQuery library since we use this on a regular basis.
So here is what our HTML5 page markup looks like now:
<!DOCTYPE html>
<html lang="en" dir="ltr" id="texaswebdevelopers" class="no-js">
<head>
<meta charset="utf-8" />
<title>HTML5 and CSS3 Boilerplate</title>
<link rel="shortcut icon" href="favicon.ico">
<meta name="description" content="HTML5 and CSS3 boilerplate page example." />
<meta name="keywords" content="html5, css3" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- modernizr.com -->
<script src="js/modernizr-1.5.min.js"></script>
<!-- jQuery (hosted by Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js"></script>
</head>
<body id="home">
<p>Hello World</p>
</body>
</html>
If you take a look at the very beginning example, you may have noticed the <style> tag that takes the following elements and sets them to display as block level elements (<div>).
<style>
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
Rather than placing this on each individual page we created a global CSS reset and moved it into our external stylesheet:
/* BEGIN RESETS CSS */
/* HTML5 tags */
article, aside, dialog, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figcaption, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
border: 0;
padding: 0;
outline: 0;
font-size: 1em;
vertical-align: baseline;
background-color: transparent;
}
a {
margin: 0;
border: 0;
padding: 0;
font-size: 1em;
vertical-align: baseline;
background-color: transparent;
}
abbr[title], dfn[title] {
border-bottom: 1px dashed #CCC;
cursor: help;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
del {
text-decoration: line-through;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
mark {
color: #000;
background-color: #FF9;
font-style: italic;
font-weight: bold;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
textarea {
margin: 0; padding: 0;
}
/* END RESETS CSS */
In our working example, where you may download the html and css files, we provided a layout that uses the majority of the html5 tags that a developer would use to create a simple page. This is boilerplate - the basic layout and structure you can build upon to eventually add those exciting video, canvas and drag and drop tags!
Our final layout has this overall structure:
<!DOCTYPE html>
<html lang="en" dir="ltr" id="texaswebdevelopers" class="no-js">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="shortcut icon" href="favicon.ico">
<meta name="description" content="HTML5 and CSS3 boilerplate page example." />
<meta name="keywords" content="html5, css3" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- modernizr.com -->
<script src="js/modernizr-1.5.min.js"></script>
<!-- jQuery (hosted by Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js"></script>
</head>
<body id="home">
<header>
<hgroup>
<h1></h1>
</hgroup>
</header>
<nav>
<ul>
<li class="active"><a href="#" title="home">link</a></li>
<li><a href="#" title="text">link</a></li>
</ul>
</nav>
<aside>
<article>
<figure>
<img src="logo.jpg" alt="text" />
</figure>
<hgroup>
<h2>Featured Article</h2>
<h3><a href="#">link text</a></h3>
</hgroup>
<p>text</p>
<p>Published on <time datetime="2010-08-10" pubdate>10 August 2010</time></p>
</article>
</aside>
<section id="content">
<ol id="posts-list" class="rssfeed">
<li><article class="blog-entry">
<header><h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink">Blog Post Example</a></h2></header>
</p>
<p>article content</p>
<footer class="post-info">
<abbr class="published" title="2010-08-08T14:07:00+06:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->8th August 2010</abbr>
<address class="vcard author"><a class="url fn" href="#">TexasWebDevelopers</a></address>
</footer><!-- post 1 -->
</article></li>
<li><article class="blog-entry">
<header><h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink">Web Form Example</a></h2></header>
</p>
<form>
<fieldset>
<legend>Requires Opera</legend>
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname" required autofocus />
<label for="email">Email:</label>
<input type="email" name="email" id="email" />
<label for="website">Website:</label>
<input type="url" name="website" id="website" />
<label for="age">Age:</label>
<input type="number" name="age" id="age" />
<label for="birthday">Birthday:</label>
<input type="date" name="birthday" id="birthday" />
<label for="salutation">Salutation:</label>
<input type="text" name="salutation" id="salutation" list="options">
<datalist id="options">
<option value="Mr.">
<option value="Mrs.">
</datalist>
<input type="submit" />
</fieldset>
</form>
<footer class="post-info">
<abbr class="published" title="2010-08-09T14:07:00+06:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->9th August 2010</abbr>
<address class="vcard author"><a class="url fn" href="#">TexasWebDevelopers</a></address>
</footer><!-- post 2 -->
</article></li>
</ol>
</section><!-- /#content -->
<section id="extras">
<div class="blogroll">
<h2>blogroll</h2>
<ul>
<li><a href="#" rel="external">link</a></li>
<li><a href="#" rel="external">link</a></li>
<li><a href="#" rel="external">link</a></li>
<li><a href="#" rel="external">link</a></li>
</ul>
</div><!-- /.blogroll -->
<div class="social">
<h2>social</h2>
<ul>
<li><a href="http://www.texaswebdevelopers.com/blog/" rel="me">blog</a></li>
</ul>
</div><!-- /.social -->
</section><!-- /#extras -->
<footer>
<address>
<span class="fn copyright">© 1995-2010 <a href="http://www.TexasWebDevelopers.com">Texas Web Developers</a></span>
</address>
</footer>
</body>
</html>
