Browser optimize

Transform your website with HTML5 Boilerplate

Ryan Boudreaux introduces a tool that will help you convert your website to HTML5. The template includes HTML, CSS, JavaScript, and more files to help you move ahead.

Have you been waiting to convert your website to HTML5 but figured you didn't have the resources or the tools to get it done within a reasonable time and/or budget? The HTML5 Boilerplate might be the tool you need to get your website transformed into the next chapter of the hypertext markup language narrative. This post will review the features, options, source code, and examples of the HTML5 Boilerplate in use today. Probably the single most beneficial factor in making a decision to use the HTML5 Boilerplate is its built-in IE conditional comments that resolve specific IE legacy issues.

(Credit: Original "Boiler Plate" background image above by arbyreed, Attribution Creative Common License)

What is the HTML5 Boilerplate?

The HTML5 Boilerplate is a professional front-end template that aids web developers in constructing fast, adaptable, and robust websites or web applications utilizing a set of HTML5-ready features and elements. The latest stable source code release is available from the HTML5 Boilerplate as a compressed 97KB zip file, and at this writing is listed as v4.0.1. You can also obtain a custom build from Initializr, where you are free to generate your own new project using the HTML5 Boilerplate template. Or, you can clone the github repo, where you can check out the tagged release you would like to use for your project.

The core

The core of the HTML5 Boilerplate includes the HTML, CSS, JavaScript, .htaccess, crossdomain.xml, and miscellaneous items such as an ignore file, .gitignore, which is primarily used to avoid certain project-level files and directories from being kept under source control.

HTML

The HTML is comprised of a series of IE conditional comments, which apply to relevant IE-specific classes to the <html> tag, and fixes much of the CSS for legacy versions of IE. And when you use the conditional classes technique, the benefits include:

  • Avoids a file-blocking issue which has been resolved
  • Integration is easier with CMS's like WordPress or Drupal which use the body class more heavily
  • Validates as HTML5
  • Uses the same elements as Modernizr and Dojo
  • Improves clarity of code in multi-developer teams
  • The no-js class allows you to explicitly add custom styles when JavaScript is disabled or enabled in users browsers
  • Uses the HTML5 specification for order of meta tags and &lt;title>, including a X-UA-Compatible meta tag for the latest IE versions, and it also includes a "viewport" meta tag for mobile devices
  • Uses a custom build of Modernizr
  • The main content area is fairly empty with options for Google Frame, Google CDN for jQuery, and Google Analytics Tracking Code
The index.html file and associated resource scripts and stylesheets are shown in Figure B, displayed in Google Chrome Version 22.0.1229.94 m with the Inspect element tool open to Resources split view. Looking under the hood, we can view the HTML5 code which creates the boilerplate template.

Figure B

And the extracted code snippet of the HTML is displayed below:

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

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

        &lt;link rel="stylesheet" href="css/normalize.css">
        &lt;link rel="stylesheet" href="css/main.css">
        &lt;script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        &lt;!--[if lt IE 7]>
            &lt;p class="chromeframe">You are using an &lt;strong>outdated&lt;/strong> browser. Please &lt;a href="http://browsehappy.com/">upgrade your browser&lt;/a> or &lt;a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame&lt;/a> to improve your experience.&lt;/p>
        <![endif]-->

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

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

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
    </body>
</html>
CSS

The starting CSS includes linking to the normalize.css and then the main.css files. Other benefits include:

  • Useful HTML5 Boilerplate defaults including Display Block, Base, Links, Typography, Lists, Embedded Content, Figures, Forms, and Tables
  • Includes common helpers such as Image Replacement , hidden, and Clear Fix, which contains floats
  • Media Queries and Print styles for paged media

This starting CSS does not rely on the presence of conditional class names, conditional style sheets, or Modernizr. It is ready to use whatever your development preferences happen to be.

A portion of the main.css code snippet is displayed below:

/*
 * HTML5 Boilerplate
 *
 * 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;
}

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

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations 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;
}
JavaScript

The JavaScript includes calls to two local files, the main.js, and the plugins.js, and calls to two vendor files which include the jquery-1.8.2.min.js and modernizr-2.6.2.min.js files.

  • main.js - Can be used to contain or reference your site/app JavaScript code. For larger projects, you can make use of a JavaScript module loader, like Require.js, to load any other scripts you need to run.
  • plugins.js - can be used to contain all your plugins, such as jQuery plugins and other 3rd party scripts.
  • vendor - contains 3rd party vendor scripts such as the jQuery and Modernizr libraries
.htaccess

This is the configuration file that allows for the Apache web server configuration. The HTML5 Boilerplate includes a number of best practice server rules for making web pages fast and secure; these rules can be applied in the included .htaccess file. Individual configuration procedures are provided for Windows IIS server or for a Linux Apache web server, as well as using MAMP Pro on a Mac. Along with security, performance, Gzip components, Cache busting, and trailing slash redirects, the configuration file provides many options.

crossdomain.xml

This XML document policy file grants web clients such as Adobe Flash Player and Adobe Reader permission to handle data across multiple domains.

Examples of websites that utilize the HTML5 Boilerplate

Many high profile websites currently utilize the HTML5 Boilerplate in one fashion or another, including ProjectRe:Brief by Google (Figure C), Microsoft Surface, Data.NASA.gov (Figure D), Barack Obama, Mercedes-Benz A Class, and Racing Green casual and formal wear (Figure E).

Figure C

Figure D

Figure E

The HTML5 Boilerplate might just be the tool you need to get your website converted to the paradigm of markup language.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

6 comments
Deadly Ernest
Deadly Ernest

Questions first 1. What sort of usage do you envision being done with the no-js class? I ask as most people who have JavaScript turned off or limited do so to inhibit a website taking over control of the browser and to inhibit unwanted ads being stuffed down their throat. 2. If I use this system to work over a website or web page that has no sales cart or collects no data, but simply displays information, will the software use only HTML and NOT include JavaScript and the like? 3. I notice this is a zip file, do they have a version for use on Linux or Unix and not JUST Windows? Points Now I notice the code you show includes a call to ajax.googleapis.com - a source commonly used to stuff ads down people's throats if they want them or not. Is there a particular reason for this. I'm a great believer in the website server having on it ALL the files and codes needed to provide the pages and the site. I wonder if Boilerplate will easily allow people to set their pages and site up that way, as it seems to need to call third party scripts, something many security people tell you to ensure doesn't happen now.

dennis-r123
dennis-r123

Ryan, You usually write very informative articles. This one is not one of them. You entitled your article "Transform your website with HTML5 Boilerplate". You give a description of what is contained in Boilerplate, but you do not provide any information which specifies how to "Transform your current website with HTML5 Boilerplate" or provide any examples of how to implement Boilerplate into an existing website to convert it to HTML5.

RJBoudreaux
RJBoudreaux

1. The "no-js" class is invoked to allow Modernizr to run, as it will remove the "no-js" class and replace it with "js". Therefore, your website will render with similar functionality with or without js enabled in the browser. 2. JavaScript is utilized for a wide variety of uses and functionality, and it will vary depending on what it is used for in your implementation. 3. It is available as a zip or a tarball - https://github.com/h5bp/html5-boilerplate/downloads Point 1: Are you referring to this script?src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> This is the source to the Google Hosted Library for jQuery, the Google Hosted Libraries is a content distribution network for the most popular, open-source JavaScript libraries. https://developers.google.com/speed/libraries/devguide#jqueryUI Point 2: You can easily copy any of the open source files to your local server, and then point the calls to them. There are certain advantages to pointing to the third-party sources, one of them is that they will always be updated and it eliminates the need for web server administrators to maintain the files. The disadvantage is that you rely on the third party folks to maintain the files and assume they will continue to maintain them. I hope this helps answer your questions and points.

RJBoudreaux
RJBoudreaux

This article is intended as a high level overview of the HTML5 Boilerplate. Your idea for a tutorial style post taking an existing site and applying the HTML5 Boilerplate sounds like a perfect one for a future article. I appreciate your input. Regards!

Deadly Ernest
Deadly Ernest

that you can change the website using Boilerplate. Now if the article started with "How to ...." you'd have grounds to complain, and I suspect that's the next article you'll see.

Deadly Ernest
Deadly Ernest

1. The no-js - you explained how it works by using Modernizr - but I'm interested in knowing what you expect the web designer to have it do on the website in places where the user has deliberately set their system to stop JavaScript from running for some reason often security or ad blocking. I suppose part of what I want to know is what is a good use for using JavaScript on a web page if you aren't using it to gather data or operate a shopping cart sort of thing. I see JavaScript code on pages being used to just display static information for reading, and can't understand why they used JS instead of just plain HTML. 2. googleapis.com is one, as is google-analytics.com, and I wonder what browsehappy.com is. A common security setting being pushed today is to block third party cookies and third party code calls as this the most common way to push malware onto a system in the background. So why not just copy the code onto your own server and also save time and download in having the script called, if it's really needed. Also the third party calls require more time in communication and downloads between my system and other sites; this may not be a big issue in some countries, but down here we pay for every byte of data sent and received, so anything that can be cut saves us money. In general, the main reason for using Google Analytics is to identify where I'm coming from to fine tune what ads to push at me and cost me more money to download the crap to my computer. Even then it's often a waste of time as what they identify is where the ISP I use hits the backbone and not where I really am. Some times I use another computer on the Internet while I check things on it and I get to see the ads being pushed at me, they are NEVER any closer to where I am than 1,000 kilometres as I'm NOT in a major city and my ISP enters the backbones in any one of three major cities that are well away from here - usually they go via Sydney, if that's an issue it will then go via Melbourne, and Perth is the third most likely in USA terms think New York, Tampa, Los Angeles. If I want any website owner to know where I am I'll tell them, and if they have a valid reason to know, have them ask me in an obvious way. BTW I block GA on every system I use and advise all my clients to do they same, and they usually do. I have found that some websites now have issues communicating if they do NOT get a valid response from their GA script, and that just means it's one more website on the 'never use' list I provide to friends, family, and clients. 3. I'm glad they have a tarball available, but when I went to the Boilerplate page the only download I could find was the zip file, found it real quick as it was obvious. I will admit I didn't go digging too deep into the site, but then I would have expected them to work like most and have all the downloads listed on the one page. Go to http://html5boilerplate .com/ and right there is a big orange button that says 'Download' (two actually) click on that and it wants to feed you a zip file even when I access it using a Linux system. Nothing on the front page tells you where to find the tarball. And nothing obvious on the page you got to if you click on the 'Custom Build' button either. It took me a while to find out how to find your latest link with the tarball listed, but it's NOT told to anyone. You have to go to the main page, choose the 'Source Code' link at the top, go down that to where it says 'downloads' on about the twentieth line and in the same small script as everything else, and then about that far down on the next page shown is a line where you can download as a tarball. Hell, it's almost like they were forced to include a tarball version but were ashamed to have that known and trying to hide it. The option of it is NOT mentioned anywhere in any text i saw prior to there. However, that's a marketing approach issue for the makers.