By default, HTML5 Boilerplate provides two
index.html- a default HTML skeleton that should form the basis of all pages on your website
404.html- a placeholder 404 error page
no-js class is provided in order to allow you to more easily and
.no-js) or enabled (
.js). Using this technique also helps avoid the
Please consider specifying the language of your content by adding a value to the
attribute in the
<html> as in this example:
<html class="no-js" lang="en">
The order of the
The order in which the
<title> and the
<meta> tags are specified is
the charset declaration (
the meta tag for compatibility mode (
<meta http-equiv="x-ua-compatible" content="ie=edge">):
Internet Explorer 8/9/10 support document compatibility modes that affect the way webpages are interpreted and displayed. Because of this, even if your site's visitor is using, let's say, Internet Explorer 9, it's possible that IE will not use the latest rendering engine, and instead, decide to render your page using the Internet Explorer 5.5 rendering engine.
x-ua-compatible meta tag:
<meta http-equiv="x-ua-compatible" content="ie=edge">
or sending the page with the following HTTP response header
will force Internet Explorer 8/9/10 to render the webpage in the highest available mode in the various cases when it may not, and therefore, ensure that anyone browsing your site is treated to the best possible user experience that browser can offer.
If possible, we recommend that you remove the
meta tag and send only the
HTTP response header as the
meta tag will not always work if your site is
served on a non-standard port, as Internet Explorer's preference option
Display intranet sites in Compatibility View is checked by default.
Starting with Internet Explorer 11, document modes are deprecated. If your business still relies on older web apps and services that were designed for older versions of Internet Explorer, you might want to consider enabling Enterprise Mode throughout your company.
description meta tag provides a short description of the page.
In some situations this description is used as a part of the snippet
shown in the search results.
<meta name="description" content="This is a description">
There are a few different options that you can use with the
tag. You can find out more in the
Apple developer docs.
HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases.
<meta name="viewport" content="width=device-width, initial-scale=1">
Web App Manifest
HTML5 Boilerplate includes a simple web app manifest file.
The web app manifest is a simple JSON file that allows you to control how your app appears on a device's home screen, what it looks like when it launches in that context and what happens when it is launched. This allows for much greater control over the UI of a saved site or web app on a mobile device.
It's linked to from the HTML as follows:
<link rel="manifest" href="site.webmanifest">
Favicons and Touch Icon
The shortcut icons should be put in the root directory of your site.
is automatically picked up by browsers if it's placed in the root. HTML5
Boilerplate comes with a default set of icons (include favicon and one Apple
Touch Icon) that you can use as a baseline to create your own.
Please refer to the more detailed description in the Extend section of these docs.
The Content Area
The central part of the boilerplate template is pretty much empty. This is intentional, in order to make the boilerplate suitable for both web page and web app development.
Browser Upgrade Prompt
The main content area of the boilerplate includes a prompt to install an up to date browser for users of IE 8 and lower. If you intended to support IE 8, then you should remove the snippet of code.
HTML5 Boilerplate uses a custom build of Modernizr.
html element based on the results of feature test and which ensures that
all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv).
features supported by a browser.
What About Polyfills?
<script src="js/vendor/modernizr-3.6.0.min.js"></script> <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body>
If you like to just include the polyfills yourself, you could include them in
js/plugins.js. When you have a bunch of polyfills to load in, you could
also create a
polyfills.js file in the
js/vendor directory or include the files
individually and combine them using a build tool. Always ensure that the polyfills
There are some misconceptions about Modernizr and polyfills. It's important to understand that Modernizr just handles feature checking, not polyfilling itself. The only thing Modernizr does regarding polyfills is that the team maintains a huge list of cross Browser polyfills.
jQuery CDN for jQuery
The jQuery CDN version was chosen over other potential candidates (like Google's Hosted Libraries) because it's fast (comparable or faster than Google by some measures) and, (unlike Google's CDN) is available to China's hundreds of millions of internet users. For many years we chose the Google Hosted version over the jQuery CDN because it was available over HTTPS (the jQuery CDN was not,) and it offered a better chance of hitting the cache lottery owing to the popularity of the Google CDN. The first issue is no longer valid and the second is far outweighed by being able to serve jQuery to Chinese users.
While the jQuery CDN is a strong default solution your site or application may require a different configuration. Testing your site with services like WebPageTest and browser tools like PageSpeed Insights will help you examine the real world performance of your site and can show where you can optimize your specific site or application.
Google Universal Analytics Tracking Code
Finally, an optimized version of the Google Universal Analytics tracking code is included. Google recommends that this script be placed at the top of the page. Factors to consider: if you place this script at the top of the page, you’ll be able to count users who don’t fully load the page, and you’ll incur the max number of simultaneous connections of the browser.
- Optimizing the Google Universal Analytics Snippet
- Introduction to Analytics.js
- Google Analytics Demos & Tools
N.B. The Google Universal Analytics snippet is included by default mainly because Google Analytics is currently one of the most popular tracking solutions out there. However, its usage isn't set in stone, and you SHOULD consider exploring the alternatives and use whatever suits your needs best!