-
Notifications
You must be signed in to change notification settings - Fork 12.3k
The markup
In HTML, we use " as quotes around attribute values, like this:
<a href="foo">bar</a>
In JavaScript, we use ' as much as possible.
alert('qux');
This way, we can use consistent quotes when writing HTML inside of JS:
alert('<a href="foo">bar</a>');
A series of ‘if’ statements detecting the IE browser version and applying the relevant class to the html tag. The benefit of this is it allows CSS fixes for specific IE version without needing to use hacks such as:
.this_element { float:right; margin-top: 10px; *margin-top: 5px; }
Hacks like these are commonly used to overcome bugs in the IE6/7 rendering engines. But if you are using conditional classnames on the html element, you could write your CSS like this:
.this_element { float:right; margin-top: 10px; }
.ie6 .this_element { margin-top: 5px; }
Why?
- This fixes a file blocking issue discovered by Stoyan Stefanov and Markus Leptien.
- It avoids 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 doesn't validate as HTML4 but does validate as HTML5. Deal with it.
- It plays nicely with a technique to kick off your page-specific Javascript based on your markup.
- It uses the same element as Modernizr (and Dojo). That feels nice.
- It can improve the clarity of code in multi-developer teams.
HTML5 doesn’t require the <html>,<head> and <body> tags (browsers add them if missing), but you should always use them !
- If, for example, you omit the
<body>tag in IE, use the html5shiv and don't have any visible content (like text, images...) in front of a new HTML5 element, that element with all the content from inside it will be included by IE in the<head>tag.
As recommended by the HTML5 spec (4.2.5.5 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 vectors.
The meta tag for compatibility mode needs to be before all elements except title & meta source: msdn And that same meta tag, can only be invoked for Chrome Frame if it is within the first 1024 bytes.
Versions 8 and 9 of Internet Explorer contain multiple rendering engines. So 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">
The meta tag tells the IE rendering engine two things: first, it should use the latest, or edge, version of the IE rendering environment; second, if already installed, it should use the Chrome frame’s rendering engine. This 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 Chromeframe part won't work inside a conditional comment. One workaround is to use the apache/nginx/IIS/lighthttpd configuration to send these as headers instead. You also might want to read Validating: X-UA-Compatible
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.
The next key line that’s worth looking at is the Viewport meta tag:
<meta name="viewport" content="width=device-width,initial-scale=1">
As the comments above it (see the commented and online versions of the boilerplate) explain, there are a few different options that you can use with this meta tag. You can find out more in the Apple developer docs.
The next few lines reference both the favicon and apple touch icon:
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Both of these are used by multiple browsers and devices. The favicon.ico file is used on tabs, in title bars and bookmark menus of all the major browsers. The Apple Touch icon is used on all Apple’s iOS devices and (ironically) some Android devices.
If you put the icon files in the root of the domain, you can delete these lines. Unless you want this to show up for Android. Android 2.2 needs the hardcoded reference to the touch-icon. If you want to support Android 2.1 too, you’ll even have to use rel="apple-touch-icon-precomposed". Read more about this on Rob’s blog.
The shortcut icon reference can safely be removed from the HTML if it’s in the root, unless you want it to work in Seamonkey. Mathias Bynens wrote some more about rel="shortcut icon", if you’re interested.
The CSS link is fairly straight-forward though it is worth mentioning that media="all" is implied simply by not including it. The interesting part of this link is the use of a query string ?v=1 on the end of the CSS URL. This forces the browser to refresh its cache of the CSS file each time this number is incremented, because, as far as the browser can tell, a different file is being served.
This trick is particularly useful for sites where regular updates to the CSS are commonplace. You’ll ensure that users are always seeing the latest version of the CSS if you increment the version number when you upload the new version of your stylesheet.
Read more about this technique: Version Control with Cachebusting
Modernizr is a Javascript library which hooks into the class attribute of the opening html tag (Line 2 in both versions of the Boilerplate), generates some useful classes, and sets up all browsers to properly render HTML5 elements.
(Wondering why the HTML5 Shiv project, which uses JavaScript to fix the issues IE and others have with rendering HTML5, hasn’t been included in the boilerplate? The HTML5 Shiv is actually incorporated into Modernizr.)
I prefer writing explicit styles for the user without JavaScript. Most of my sites expect JavaScript so that would mean prefixing a good 60% of my CSS selectors with .js. Alternatively I can have a few targeted .no-js overrides and tackle that case. More here: http://paulirish.com/2009/avoiding-the-fouc-v3/ and http://paulirish.com/2009/avoiding-the-fouc-v3/#comment-34951
As well as improving HTML5 support, Modernizr also adds a series of class names to the html tag, where it initially says no-js, according to the browsers support for CSS3 and HTML5. This allows you to target parts of your CSS at only supporting browsers, leaving the rest to serve the plainer, albeit functional, version.
In general, in order to keep page load times to a minimum, it's best to call any Javascript at the end of the page -- because if a script is slow to load from an external server, it may cause the whole page to hang. That said, the Modernizr script needs to run before the browser begins rendering the page, so that browsers lacking support for some of the new HTML5 elements are able to handle them properly. Therefore the Modernizr script is the only Javascript file loaded at the top of the document.
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.
Towards the bottom of the page we find the final few lines of code, beginning with the jQuery library. Regardless of which JavaScript library you use in your projects, it is well worth the time and effort to look up and reference the Google CDN (Content Delivery Network) version. Your users may already have this version cached in their browsers, and Google's CDN is likely far faster than your server. More on 6,953 reasons why I still let Google host jQuery for me
Why not version /1/ so you always get the latest version?
The /1/ version is only cached for 1 hour. Also there can be breaking changes in jQuery 1.7 or whatever. You will want to deliberately upgrade your users.
Note: We load a protocol-independent absolute path of jQuery so you’re good to go on secure and non-secure pages. This works on all browsers as long as there is no redirection to a different URL after switching protocols. For more details on the technique, read The Protocol-relative URL.
The following line provides the page with a fallback should the CDN version of the jQuery library not be available, likely only if you are offline or developing from a file:// protocol. Some users report things being quite slow while developing locally (or via a fileserver) with the // URL; if it pains you too much, add in the http: to the URL. The unescape trick is necessary for using this snippet while in an XHTML environment, otherwise you could just do document.write('<script src="js/jquery-1.4.4.min.js"><\/script>').
Finally, we get the latest version of the Google Analytics tracking code. This latest version includes a few new handy tricks from an analytics perspective, and also loads faster than the previous version. 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.
HTML5 Boilerplate is using an optimized version of the new Google Analytics async snippet so ga.js isn’t blocking. For more information, go to http://mathiasbynens.be/notes/async-analytics-snippet and http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html.
Much of this guide was extracted from an unofficial guide to html5 boilerplate — thank you!
*If you have also contributed to this guide.. please drop your name here: Design Reviver, Paul Irish, Divya Manian, Mathias Bynens, Ruthie BenDor *