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 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
- Uses the HTML5 specification for order of meta tags and <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
And the extracted code snippet of the HTML is displayed below:
<!--[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]-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- 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">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
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
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate.
* Customize the background color to match your design.
* A better looking default horizontal rule
border-top: 1px solid #ccc;
margin: 1em 0;
- 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
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 BoilerplateMany 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).
The HTML5 Boilerplate might just be the tool you need to get your website converted to the paradigm of markup language.