HTML5 Boilerplate Explained In Simple Terms

By Ning Yap

Get the latest version of HTML5 Boilerplate and read about Rails integration here

What is HTML5 Boilerplate?

A template from which one can more easily build a standards-aware website. It is in the words of one of its creators Paul Irish “a good starting template of HTML and CSS and a folder structure that works… Baked into it is years of best practices from front-end development professionals.” Since 2010, it’s been polished and iterated upon by hundreds of developers.

Here’s a quick list of features:

Cross-browser compatibility (Chrome, Firefox, Safari, Opera, IE)
Legacy browser support back to IE6
Includes common JavaScript libraries jquery.min.js and modernizr.js
Includes common CSS library normalize.min.css
Google Analytics tracking code snippet
CSS common helper classes, media queries for responsive design
Customizable! And open-source!

How popular is it?

A Google search for “boilerplate” yields html5boilerplate.com as the first search result over an actual boiler plate.

Actual boiler plate used to make boilers

A look at the file/folder structure

    .
    ├── css
    │   ├── main.css
    │   └── normalize.css
    ├── doc
    ├── img
    ├── js
    │   ├── main.js
    │   ├── plugins.js
    │   └── vendor
    │       ├── jquery.min.js
    │       └── modernizr.min.js
    ├── .htaccess
    ├── 404.html
    ├── apple-touch-icon-precomposed.png
    ├── index.html
    ├── humans.txt
    ├── robots.txt
    ├── crossdomain.xml
    └── favicon.ico

The structure is fairly straighforward, CSS files belong in css, documentation belongs in doc, image assets in img, and JavaScript files in js. main.css contains boilerplate styles that can be generated via initializr.com, as well as helper classes and media queries.

.htaccess is the default config file for an Apache web server, humans.txt is for listing team members and technologies used, and robots.txt is for pages that should be hidden from search engines. crossdomain.xml is a template for working with cross-domain requests and favicon.ico and the Apple touch icon should be replaced with your own so the user sees a customized icon when he or she bookmarks the site.

404.html is the default “Not Found” page and index.html the default load page.

Examining index.html

Hello world! This is HTML5 Boilerplate.

index.html (index.html) download

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X');ga('send','pageview');
        </script>
    </body>
</html>

———

We have our simplified HTML5 doctype declaration:

<!DOCTYPE html>

Conditional commenting only evaluat-able by Internet Explorer browsers. This allows for specifying CSS fixes for specific legacy versions of IE. The “.no-js” class can be used to specify custom styles when JavaScript is disabled.

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

Apparently, if the charset isn’t declared within the first 512 bytes of your HTML document, your site is vulnerable to malicious code and hijacking!

<meta charset="utf-8">

Another IE fix to ensure the latest rendering engine version of IE (Internet Exploder) is being used

<meta http-equiv="X-UA-Compatible" content="IE=edge">

If you are NOT coding a responsive site, or site for mobile, take this line out. It’s basically a message to the mobile browser that says, “Render me differently, I’m designed for mobile screens too!”

<meta name="viewport" content="width=device-width, initial-scale=1">

Keep those styles in line with normalize.css! “Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.” How fascist.

<link rel="stylesheet" href="css/normalize.css">

Why is this script loaded at the top (rather than the bottom) of the page, possibly causing the whole page to hang if your servers are slow? That’s because this JavaScript library, Modernizr, helps older browsers handle HTML5 elements; therefore, it must load before any HTML5-specific code can be read.

<script src="js/vendor/modernizr-2.6.2.min.js"></script>

Examining index.html: <body> edition

Kindly inform your site visitor that their choice of browser is antiquated and they have no taste in technology

<!--[if lt IE 7]>
  <p class="browsehappy">You are using an <strong>outdated</strong> browser. 
  Please <a href="http://browsehappy.com/">upgrade your browser</a> 
  to improve your experience.</p>
<![endif]-->

Content is king.

<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>

Bow down to almighty Google, sourcer of jQuery. Actually, you should use Google CDN (Content Delivery Network) because the visitor’s browser will likely have a cached version of jQuery from their site… and Google’s servers are probably way faster than yours anyway. So yes, bow down to Lord Google.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

The ever watchful eye

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
    (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
    e.src='//www.google-analytics.com/analytics.js';
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
    ga('create','UA-XXXXX-X');ga('send','pageview');
</script>

Abbreviated CSS rundown

main.css (main.css) download

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

















/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

———

Friends don’t let friends float divs non-clearfixed.

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

What are print styles? Print styles are styles for “printing”, which means the transfer of ink to “paper”. Paper is a dried, flat-sheet made from the fibrous pulp of wood, a material that hit its peak popularity at the end of the 20th century. Who prints webpages, seriously? Get a tablet, people!

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

My, what a large, shiny screen you have there! You can come over and query my media anytime…

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

Apologies for that last one.

A case against using HTML5 Boilerplate

HTML5 Boilerplate ca. 2010

Will the real HTML5 boilerplate please stand up? This guy, Harry Roberts, is into minimalism and questioning assumptions, which is always good. He considers the original to be bloatware, basically.

THIS IS SPARTA!!!!’s version of HTML5 Boilerplate

index.html (the_real_html5_boilerplate.html) download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML5 boilerplate – all you really need…</title>
    <link rel="stylesheet" href="css/style.css">
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body id="home">

    <h1>HTML5 boilerplate</h1>

</body>
</html>

Would have resulted in a much shorter blog post from me. Ah well…

Summary

Now you know why HTML5 Boilerplate exists. It is a beacon of hope in this hostile world of way too many options for browsing. At least with the boilerplate, you have a few crowd-sourced signposts pointing the way.

I must say, front-end development has really come a long way since the good ol’ GeoCities days. So tell me, when will people stop confusing the roles of web designer and web developer?

The Good Ol’ Days, Bless ‘er Heart

Coding is Awesome

A Creative Blog for Ningbit

HTML5 Boilerplate Explained in Simple Terms