An Introduction to HTML5 Boilerplate

Kerry Butters
Kerry Butters
Share

Even for the most skilled of designer veterans, getting started with a new standard can be a daunting affair, even when a language is designed to make coding easier, such as HTML5. Saying that, a thorough knowledge of HTML 4.01 is something that can be built upon, it’s just a case of knowing which tags are in and which are out. HTML5 Boilerplate helps designers to get started with the new standard by offering a professional front-end template that allows you to create a fast, robust and adaptable site with a set of HTML5-ready features and elements. It was created by Paul Irish and Divya Manian and is an open source project that is perfect for creating cross-browser sites that work with older browsers, while being HTML5 ready. It can be downloaded from the HTML5 Boilerplate website in its full form, or a stripped down version that doesn’t include all of the explanatory documentation. The lighter version is recommended for those who have worked with it before and can be used once you’re familiar with the template. For those of you that are confident you can work with it fully, there’s also a customizable option that allows you to choose the elements you need.

What’s in the box?

Core features to be found in HTML5 Boilerplate include all of the necessary elements that you will need to begin, as well as supporting documentation:
  • HTML
  • CSS
  • JavaScript
  • .htaccess (Apache web server configuration)
  • Crossdomain.xml
  • Miscellaneous (ignore file, gitignore and so on)
Modernizr is also included in order to allow you to style the new HTML5 elements in IE and helps with detecting HTML5 or CSS3 features in all browsers, including earlier versions of IE (before v9). Let’s look first at the HTML, which at its core is comprised of a number of IE conditional comments for relevant IE-specific classes and CSS for older versions of IE. These allow for a certain number of benefits to the designer using the conditional classes technique, such as easier integration with CMSs like WordPress and Drupal. It also fixes a lot of the CSS for older versions of IE, as well as IE classes that apply to the tag. This validates as HTML5 and the no-js
class allows you to add custom styles when JavaScript is enabled or disabled in the end-user browser. The HTML also includes the same elements as Modernizr and Dojo, as well as options for Google Frame, Google CDN for jQuery, and Google Analytics Tracking Code in the content area. You can also use HTML5 Boilerplate with Initializr (get the demo page here), which generates templates based on Boilerplate that allow you to choose the elements you want and those you don’t. With this, you also have the option of using a responsive template from the outset, rather than starting with a blank page.

Getting started

Once you’ve downloaded HTML5 Boilerplate, it’s time to set up the basic structure of the site, add content, style and functionality and start testing! The basic structure will look something like the below in the first instance:
.
├── css
│   ├── main.css
│   └── normalize.css
├── doc
├── img
├── js
│   ├── main.js
│   ├── plugins.js
│   └── vendor
│       ├── jquery.min.js
│       └── modernizr.min.js
├── .htaccess
├── 404.html
├── index.html
├── humans.txt
├── robots.txt
├── crossdomain.xml
├── favicon.ico
└── [apple-touch-icons]
So, let’s look at how these can be used, starting with CSS, the directory which should contain all of your site’s CSS files. Note that this directory already includes some CSS to help you get started, as well as the normalize CSS. The starting CSS includes:
  • HTML5 Boilerplate defaults
  • Common helpers
  • Placeholder media queries
  • Print styles
This doesn’t rely on conditional classnames, conditional style sheets or Modernizr and can be used ‘out of the box’, whatever your development preferences.

Common helpers

The .ir class can be added to elements that you’re applying image-replacement to. When replacing content with an image, it’s necessary to set a specific width and height element so that the image appears.
.ir {
background-image: url(http://yoursite.com/images/logo.jpg);
background-size: 100% auto;
width:450px;
height:450px
}
To detail snippets for all of the CSS classes would involve an awful lot of text, so we’ll look at the most relevant. However, bear in mind that the following classes exist:
  • .hidden (add to any elements you want to hide)
  • .visuallyhidden (hides text from browsers but makes available to screen readers)
  • .invisible (add to any element to hide without affecting layout)
  • .clearfix (adding ensures that any floated children are contained within an element)
  • Paged media styles (only supported in a few browsers)

Media Queries

One of the beautiful things about HTML5 Boilerplate is that it makes it a simple matter to get started with ‘Mobile First’ and RWD sites. However, not everyone would agree that using media queries is the best approach, as discussed by Jason Grigsby in 2010. In HTML5 Boilerplate, placeholders are included to help build mobile styles for different resolutions and screen sizes. The documentation recommends that you adapt media queries based on the site content, rather than “mirroring the fixed dimensions of specific devices”. While I believe that the ‘mobile first’ approach is a sensible one these days, not everyone will want to take that approach and if you are one of them, then you can just edit or remove the placeholder media queries. For mobile apps, you may want to take a look at Mobile Boilerplate.

Print styles

These strip away all of the background colors and change fonts to dark gray with no shadow in order to help end-users save on printer ink. They are also designed to reduce the number of pages in order to reduce paper usage, a handy little selling point for those clients that are interested in the environment! print styles

Other directories

The JS directory also includes some initial code to help you get going as well as being the place where you will want to store all of the site’s JS files, libraries and plugins. The .htaccess directory contains the default server configuration for Apache servers; if you want to use a different set up, then you can find them here
. There is also a very basic 404 page that you can adjust to suit, as well as the obligatory index.html file that contains the bare bones necessary to get you started on building all of your pages.

Icons

Boilerplate also provides a ‘starter set’ of favicon and apple touch icons that you can replace with your own. The apple touch icons also work with numerous browsers and devices, according to Boilerplate developer Paul Irish, who also helpfully provides a walkthrough of the code. A quick web search will show that it’s quite difficult to find anyone that doesn’t have a good word to say about HTML5 Boilerplate and that it has generated a good few articles on the best snippets to use. There’s no doubt that the template makes it easier to begin coding in HTML5 and what’s more, newer elements are simple to work with and can make for a great-looking site.

Example website

1.21 Jiggawatts A quick peek at the code tells you all you need to know at 1.21 Jiggawatts, not only do the snippets give it away, but the site designer has also given credit where it’s due in the source code. Other sites include: Barack Obama, Mercedes Benz and NASA
, to name but a few. For a complete showcase, have a look at HTML5 Boilerplate, an online showcase.

Further resources

Rob Larson’s IBM article gives some tips for rearranging the folder structure and also includes the “Mark of the Web” snippet for those that test templates in IE when running Windows using the file protocol. To suppress the security nag boxes when working in this way, insert the following just after the doctype declaration as below:
< !doctype html>
< !—saved from url=(0014) about:internet -->
A WordPress theme by Sam Sherlock that combines Boilerplate with the Thematic framework can be found here
and it’s also a simple matter to add 960.gs for those that are fans of the CSS framework. HTML5 Boilerplate is an excellent resource for kick-starting any new project that requires cross browser functionality. There are that many devices on the market now that it can be difficult to know where to start and HTML5 Boilerplate gives you all of the skeleton code that you will need for mobile, tablet and desktop. And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World. Comments on this article are closed. Have a question about Accessibility? Why not ask it on our forums?

Frequently Asked Questions (FAQs) about HTML5 Boilerplate

What is the significance of the HTML5 Boilerplate?

HTML5 Boilerplate is a professional front-end template that helps you build fast, robust, and adaptable web apps or sites. It’s a set of files that developers can download, which provide a foundation for any website. It includes HTML, CSS, JS files, and more. The boilerplate is designed to provide a base level of best practices, cross-browser normalization, and common bug fixes.

How does HTML5 Boilerplate differ from other HTML templates?

HTML5 Boilerplate stands out from other HTML templates due to its extensive testing and wide usage. It’s a result of years of iterative development and community knowledge. It includes a detailed and customizable build script that performs several routine tasks like image optimization, CSS and HTML minification, and error-free JavaScript concatenation.

Why should I use Normalize.css in HTML5 Boilerplate?

Normalize.css is a modern, HTML5-ready alternative to CSS resets. It’s a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s included in HTML5 Boilerplate because it corrects bugs and common browser inconsistencies, improves usability, and explains what code does using detailed comments.

What is Modernizr in HTML5 Boilerplate?

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. It’s included in HTML5 Boilerplate to take advantage of the new capabilities of HTML5 and CSS3 that some browsers may not support. It adds classes to the HTML element which allow you to target specific browser functionality in your stylesheet.

How can I customize my HTML5 Boilerplate?

HTML5 Boilerplate is highly customizable. You can modify the files and folders as per your project requirements. The build script included in the boilerplate allows you to automate many tasks, customize your project structure, and optimize your site for production.

What is the .htaccess file in HTML5 Boilerplate?

The .htaccess file is a configuration file for use on web servers running the Apache Web Server software. In HTML5 Boilerplate, it provides a set of sensible defaults such as enabling Gzip compression for faster page load, setting long expiry times on media files for better caching, and more.

How does HTML5 Boilerplate improve page speed?

HTML5 Boilerplate includes several best practices for improving page speed. It includes a build script that concatenates and minifies CSS and JavaScript, optimizes images, and more. The .htaccess file enables Gzip compression and sets far-future expiry headers to improve caching.

What is the purpose of the robots.txt file in HTML5 Boilerplate?

The robots.txt file is used to give instructions about their site to web robots. In HTML5 Boilerplate, it includes some sensible defaults to prevent certain files from being indexed by search engines, like your CSS and JavaScript files, and the XML sitemap.

How does HTML5 Boilerplate ensure cross-browser compatibility?

HTML5 Boilerplate ensures cross-browser compatibility by including Normalize.css for CSS normalizations and bug fixes, and Modernizr for detecting feature support. It also includes jQuery, a fast, small, and feature-rich JavaScript library that works across a multitude of browsers.

Is HTML5 Boilerplate suitable for beginners?

Yes, HTML5 Boilerplate is suitable for both beginners and experienced developers. It provides a solid foundation to build upon, with many best practices already in place. However, it’s beneficial to have a basic understanding of HTML, CSS, and JavaScript to fully utilize its features.