-
Notifications
You must be signed in to change notification settings - Fork 0
html
In HTML, we use double quotes (") around attribute values, like this:
<a href="foo">bar</a>
In JavaScript, we use single quotes (') 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. 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, etc.) 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 and meta. And that same meta tag can only be invoked for Google 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:
- 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.
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 Google Chrome Frame 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">
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 shortcut icons should be put in the root directory of your site. The HTML5 Boilerplate comes with a default set of icons that you can use as a baseline to create yours.
If your site is in a sub-directory, make sure you add the link tags too so that the favicons can render as we noted in an earlier version of this document.
The CSS link is fairly straight-forward though it is worth mentioning that media="all" is implied simply by not including it.
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 class names using feature detection, 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.)
HTML5 Boilerplate 2.0 uses a custom build of Modernizr which also includes Yepnope script loading framework and Respond, a media query polyfill.
Respond is a media query polyfill that allows IE6, 7, 8 and other browsers that do not support media queries to render @media rules you specify in your CSS using JavaScript.
If you provided a basic style first and provided detailed styling rules based on the device widths to target mobile and desktop browsers, it would mean desktop browsers that do not support media queries would not get those styles (basically IE6, 7, and 8). But with Respond, all of these browsers can render the styles you specify in media queries which means you can continue to do Mobile First designs that work in all desktop browsers.
yepnope is an asynchronous conditional resource loader that's super-fast, and allows you to load only the scripts that your users need.
In HTML5 Boilerplate 2.0, Yepnope is also used to load Google Analytics snippet asynchronously.
If you do not wish to use this custom build of modernizr, make sure you also change the Google Analytics snippet to not be loaded via the Yepnope resource loader (see section on Google Analytics below).
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 2.0 uses Yepnope to load the analytics script asynchronously. As mentioned earlier, if you intend to use without Modernizr's custom build, read Optimizing the asynchronous Google Analytics snippet and Tracking Site Activity - Google Analytics.
We finally have a Chrome Frame that you do not need administrative rights to install. Because of this, we have included the prompt to install Chrome Frame by default for IE6 users. If you intend to support IE6, you should remove this snippet.
Much of this guide was extracted from An Unofficial Guide to the 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