Skip to content


Subversion checkout URL

You can clone with
Download ZIP


khalifenizar edited this page · 68 revisions

What is HTML5 Boilerplate?

HTML5 Boilerplate is a professional front-end template that helps you build fast, robust, adaptable, and future-proof websites. Spend more time developing and less time reinventing the wheel. It is the product of many years of iterative development and combined community knowledge.

The boilerplate ships with a number of features:

  • HTML, CSS, and JavaScript starting points
  • A custom build of Modernizr which includes:
    • Modernizr itself which detects HTML5 and CSS3 features and adds classes to the html tag to let you style accordingly.
    • Respond.js which is a polyfill that allows you to use media queries with browsers that do not support media queries such as IE6, 7, & 8
    • Yepnope an asynchronous resource loader that you can use to load scripts, styles, and resources asynchronously and conditionally
  • A build script
  • A default configuration for the apache web server - htaccess. Configuration files for other servers are available in our server-configs repo.

Help! My code with Boilerplate is not working!

  • Breathe in and out.
  • Join our mailing list.
  • Upload your code to JsFiddle.
  • Write a mail to the mailing list explaining what you expect to happen, and what actually happens. Do not forget the link to your fiddle from the previous step! Voilá!
  • There is also a great community of people ready to help on StackOverflow

No Seriously, it's Boilerplate's fault!

If that's the case, please submit an issue ASAP! Even better if you know the solution, as that would make it faster to fix (everyone wins!)

Can I integrate Twitter Bootstrap with HTML5 Boilerplate?

Yes. Read about how to integrate Twitter Bootstrap with HTML5 Boilerplate.

Can I integrate with HTML5 Boilerplate?

Of course! Read about how to integrate with HTML5 Boilerplate.

How should script.js and plugins.js be used? What should go in these files?

Script.js should hold your primary application script. It might make sense to store it in an object literal and execute it based on body classes.

Plugins.js is used for jQuery plugins and other 3rd party scripts. One approach is to put the jQuery plugins inside of the (function($){ ... })(jQuery); closure to make sure they're in the jQuery namespace safety blanket, especially if they were written by other developers. See also jQuery Plugin Authoring

Why is the URL for jQuery without "http"?

Read more about protocol-relative URLs

N.B. Using a protocol-relative URL for files that exist on a CDN is problematic when you try to view your local files directly in the browser. The browser will attempt to fetch the file from your local file system. We recommend that you use a local server to test your pages (or Dropbox). This can be done using Python by running python -m SimpleHTTPServer from your local directory, using Ruby by installing and runing asdf, and by installing any one of XAMPP, MAMP, or WAMP.

Why don't you use so that the newest version is automatically loaded?

  1. The latest version of jQuery may not be compatible with the existing plugins/code on the site, version update should be a conscious decision
  2. The latest version has a very short max-age=3600 compares to the specific version of max-age=31536000

What if I want a different JavaScript Library to jQuery?

Remove the two lines of jQuery-related code from index.html and the little bit inside plugins.js.

Why is the analytics code at the bottom? Google recommends we put it in the head.

The advantage to placing it in the head is that you will track a user's pageview even if they leave the page before it has been fully loaded. Putting the code at the bottom keeps all the scripts together and reinforces that scripts at the bottom are the right move.

There could be some cases where very customized analytics is in place and you want that level of control and visibility. But that is not the 80% case. If you're an analytics power user, then I'm sure you can adjust the script as necessary.

What are print styles and why do you need them?

These styles are used when the page is printed. In fact all browsers (IE6+) can support the @media print {} syntax within a file. HTML5 Boilerplate ships with a set of styles that reduce complexity and make the printed page more obvious.

I get 404 errors and page not found errors, what is the cause?

Most probably, this is caused by the redirect script in .htaccess, read more about it at the following wiki page: Proper usage of trailing slash redirects

I want to drop support for IE6 so that my site can be more lightweight, what parts should I remove?

  • In the HTML, removing the conditional comments around the html tag should be sufficient.
  • In the CSS, you can remove any properties that with the _ IE6 hack.
  • As of Boilerplate 2.0 we already prompt IE6 users to install Chrome Frame for a better experience.

Help! IE does not seem to apply styles to :focus?!

It is a known issue for IE8 and below. Try using either :active or pseudo-focus script to fix it.

The phone numbers are looking twice as large and have a Skype highlight!

Some of your users might have installed the Skype browser extension, which detects phone numbers and lets them automatically dial them with a click. Disabling change of style is documented here.

What is profiling, and how do I use it, why do I want it?

Firebug and Chrome Dev tools offer profiling, but there is no easy way to profile IE6 and IE7. If you're focused on providing the most responsive experience possible (you should be!) then profiling should be part of your development workflow.

Do I need to upgrade my sites to a new version?

Nope. So far there have been no critical bugs within our code that we've fixed from version to version. There are some nice changes that reduce your stress, but updating your HTML or CSS to the new versions is probably more effort than it's worth.

However, the .htaccess and Build Script you probably didn't edit and therefore can be dropped into your existing sites without much trouble. So feel free to update those, and also update your Modernizr and jQuery versions to the latest versions they have. But remember to thoroughly test following any changes you make.

Your questions

Edit this page and ask your own questions below and they will be answered.

Is it HTML4 / XHTML compatible?

Why sure it is. The markup is a bit more friendly to validation in HTML4, but with enough tweaks you can make it validate fine in either. An important thing to point out is that the browser doesn't really care which doctype you have (just as long as you have one). It won't render a page differently just because you switch it from the html5 doctype to XHTML. So it's only for declaring your relationship with the validator.

Is anything in the .htaccess conflicting with a wordpress theme, or can I just update my .htaccess with boiler plate goodness?

Theoretically none, but we have not investigated this. There are Wordpress themes already available that work with H5BP extensively, you can use them as a reference when you create yours.

Is there a way to integrate this with Zend Framework and still use the build script?

Not sure. We do recommend you try and report back any issues! We can take it from there on.

Why is the DOCTYPE lowercase rather than uppercase?

Because you can also use DoCTypE or DocTYPE or DOCtype or DOctYPe. We also like code that does not yell at you.

Can I integrate jQuery Mobile with HTML5 Boilerplate?

Yes of course. We see no reason for conflict.

If I have Joomla, how do I integrate boilerplate with it?

Have a look at this article about starting with Joomla and HTML5 Boilerplate.

Why limit "www" suppression to only http (and exclude https)?

Something went wrong with that request. Please try again.