A series of IE conditional comments apply the relevant IE-specific classes to
html tag. This provides one method of specifying CSS fixes for specific
legacy versions of IE. While you may or may not choose to use this technique in
your project code, HTML5 Boilerplate's default CSS does not rely on it.
When using the conditional classes technique, applying classes to the
element has several benefits:
- It avoids a file blocking issue discovered by Stoyan Stefanov and Markus Leptien.
- It avoids the need for an empty comment that also fixes the above issue.
- CMSes like WordPress and Drupal use the body class more heavily. This makes integrating there a touch simpler.
- It still validates as HTML5.
- It uses the same element as Modernizr (and Dojo). That feels nice.
- It can improve the clarity of code in multi-developer teams.
no-js) or enabled (
js). More here: Avoiding the
The order of meta tags, and
As recommended by the HTML5 spec (220.127.116.11 Specifying the document's character encoding), add your charset declaration early (before any ASCII art ;) to avoid a potential encoding-related security issue in IE. It should come in the first 1024 bytes.
The charset should also come before the
<title> tag, due to potential XSS
The meta tag for compatibility mode needs to be before all elements except title and meta. And that same meta tag can only be invoked for Google Chrome Frame if it is within the first 1024 bytes.
This makes sure the latest version of IE is used in versions of IE that contain multiple rendering engines. Even if a site visitor is using IE8 or IE9, it's possible that they're not using the latest rendering engine their browser contains. To fix this, use:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
meta tag tells the IE rendering engine two things:
- It should use the latest, or edge, version of the IE rendering environment
- If already installed, it should use the Google Chrome Frame rendering engine.
meta tag ensures that anyone browsing your site in IE is treated to the
best possible user experience that their browser can offer.
This line breaks validation, and the Google Chrome Frame part won't work inside
a conditional comment. To avoid these edge case issues it is recommended that
you remove this line and use the
.htaccess (or other server config)
to send these headers instead. You also might want to read Validating:
If you are serving your site on a non-standard port, you will need to set this header on the server-side. This is because the IE preference option 'Display intranet sites in Compatibility View' is checked by default.
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">
Favicons and Touch Icons
The shortcut icons should be put in the root directory of your site. HTML5 Boilerplate comes with a default set of icons (include favicon and Apple Touch Icons) that you can use as a baseline to create your own.
If your site or icons are in a sub-directory, you will need to reference the
link elements placed in the HTML
head of your document.
For a comprehensive overview, please read Everything you always wanted to know about touch icons by Mathias Bynens.
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.
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.
Google Chrome Frame
The main content area of the boilerplate includes a prompt to install Chrome Frame (which no longer requires administrative rights) for users of IE 6. If you intended to support IE 6, then you should remove the snippet of code.
Google CDN for jQuery
Google Analytics Tracking Code
Finally, an optimized version of the latest Google 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.