|
|
Maxious
|
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). |
|
|
|
171 |
|