3ce3fe9 by Anon Ray at 2012-11-23 1
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
2
table of contents](README.md)
3
4
# The HTML
5
6
## Conditional `html` classes
7
8
A series of IE conditional comments apply the relevant IE-specific classes to
9
the `html` tag. This provides one method of specifying CSS fixes for specific
10
legacy versions of IE. While you may or may not choose to use this technique in
11
your project code, HTML5 Boilerplate's default CSS does not rely on it.
12
13
When using the conditional classes technique, applying classes to the `html`
14
element has several benefits:
15
16
* It avoids a [file blocking
17
  issue](http://webforscher.wordpress.com/2010/05/20/ie-6-slowing-down-ie-8/)
18
  discovered by Stoyan Stefanov and Markus Leptien.
19
* It avoids the need for an empty comment that also fixes the above issue.
20
* CMSes like WordPress and Drupal use the body class more heavily. This makes
21
  integrating there a touch simpler.
22
* It still validates as HTML5.
23
* It uses the same element as Modernizr (and Dojo). That feels nice.
24
* It can improve the clarity of code in multi-developer teams.
25
26
27
## The `no-js` class
28
29
Allows you to more easily explicitly add custom styles when JavaScript is
30
disabled (`no-js`) or enabled (`js`). More here: [Avoiding the
31
FOUC](http://paulirish.com/2009/avoiding-the-fouc-v3/).
32
33
34
## The order of meta tags, and `<title>`
35
36
As recommended by [the HTML5
37
spec](http://www.whatwg.org/specs/web-apps/current-work/complete/semantics.html#charset)
38
(4.2.5.5 Specifying the document's character encoding), add your charset
39
declaration early (before any ASCII art ;) to avoid a potential
40
[encoding-related security
41
issue](http://code.google.com/p/doctype/wiki/ArticleUtf7) in IE. It should come
42
in the first [1024
43
bytes](http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset).
44
45
The charset should also come before the `<title>` tag, due to [potential XSS
46
vectors](http://code.google.com/p/doctype-mirror/wiki/ArticleUtf7).
47
48
The meta tag for compatibility mode [needs to be before all elements except
49
title and meta](http://h5bp.com/f "Defining Document Compatibility - MSDN").
50
And that same meta tag can only be invoked for Google Chrome Frame if it is
51
within the [first 1024
52
bytes](http://code.google.com/p/chromium/issues/detail?id=23003).
53
54
55
## X-UA-Compatible
56
57
This makes sure the latest version of IE is used in versions of IE that contain
58
multiple rendering engines. Even if a site visitor is using IE8 or IE9, it's
59
possible that they're not using the latest rendering engine their browser
60
contains. To fix this, use:
61
62
```html
63
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
64
```
65
66
The `meta` tag tells the IE rendering engine two things:
67
68
1. It should use the latest, or edge, version of the IE rendering environment
69
2. If already installed, it should use the Google Chrome Frame rendering
70
   engine.
71
72
This `meta` tag ensures that anyone browsing your site in IE is treated to the
73
best possible user experience that their browser can offer.
74
75
This line breaks validation, and the Google Chrome Frame part won't work inside
76
a conditional comment. To avoid these edge case issues it is recommended that
77
you **remove this line and use the `.htaccess`** (or other server config)
78
to send these headers instead. You also might want to read [Validating:
79
X-UA-Compatible](http://groups.google.com/group/html5boilerplate/browse_thread/thread/6d1b6b152aca8ed2).
80
81
If you are serving your site on a non-standard port, you will need to set this
82
header on the server-side. This is because the IE preference option 'Display
83
intranet sites in Compatibility View' is checked by default.
84
85
86
## Mobile viewport
87
88
There are a few different options that you can use with the [`viewport` meta
89
tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and
90
Media Queries - The Complete Idiot's Guide"). You can find out more in [the
91
Apple developer docs](http://j.mp/mobileviewport). HTML5 Boilerplate comes with
92
a simple setup that strikes a good balance for general use cases.
93
94
```html
95
<meta name="viewport" content="width=device-width">
96
```
97
98
## Favicons and Touch Icons
99
100
The shortcut icons should be put in the root directory of your site. HTML5
101
Boilerplate comes with a default set of icons (include favicon and Apple Touch
102
Icons) that you can use as a baseline to create your own.
103
104
If your site or icons are in a sub-directory, you will need to reference the
105
icons using `link` elements placed in the HTML `head` of your document.
106
107
For a comprehensive overview, please read [Everything you always wanted to know
108
about touch icons](http://mathiasbynens.be/notes/touch-icons) by Mathias
109
Bynens.
110
111
112
## Modernizr
113
114
HTML5 Boilerplate uses a custom build of Modernizr.
115
116
[Modernizr](http://modernizr.com) is a JavaScript library which adds classes to
117
the `html` element based on the results of feature test and which ensures that
118
all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv).
119
This allows you to target parts of your CSS and JavaScript based on the
120
features supported by a browser.
121
122
In general, in order to keep page load times to a minimum, it's best to call
123
any JavaScript at the end of the page because if a script is slow to load
124
from an external server it may cause the whole page to hang. That said, the
125
Modernizr script *needs* to run *before* the browser begins rendering the page,
126
so that browsers lacking support for some of the new HTML5 elements are able to
127
handle them properly. Therefore the Modernizr script is the only JavaScript
128
file synchronously loaded at the top of the document.
129
130
131
## The content area
132
133
The central part of the boilerplate template is pretty much empty. This is
134
intentional, in order to make the boilerplate suitable for both web page and
135
web app development.
136
137
### Google Chrome Frame
138
139
The main content area of the boilerplate includes a prompt to install Chrome
140
Frame (which no longer requires administrative rights) for users of IE 6. If
141
you intended to support IE 6, then you should remove the snippet of code.
142
143
### Google CDN for jQuery
144
145
The Google CDN version of the jQuery JavaScript library is referenced towards
146
the bottom of the page using a protocol-independent path (read more about this
147
in the [FAQ](faq.md). A local fallback of jQuery is included for rare instances
148
when the CDN version might not be available, and to facilitate offline
149
development.
150
151
Regardless of which JavaScript library you choose to use, it is well worth the
152
time and effort to look up and reference the Google CDN (Content Delivery
153
Network) version. Your users may already have this version cached in their
154
browsers, and Google's CDN is likely to deliver the asset faster than your
155
server.
156
157
### Google Analytics Tracking Code
158
159
Finally, an optimized version of the latest Google Analytics tracking code is
160
included. Google recommends that this script be placed at the top of the page.
161
Factors to consider: if you place this script at the top of the page, you’ll be
162
able to count users who don’t fully load the page, and you’ll incur the max
163
number of simultaneous connections of the browser.
164
165
Further information:
166
167
* [Optimizing the asynchronous Google Analytics
168
  snippet](http://mathiasbynens.be/notes/async-analytics-snippet).
169
* [Tracking Site Activity - Google
170
  Analytics](http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html).