Dissecting HTML5 Boilerplate 4.0
If you are looking for a perfect HTML5 template to kickstart your new project that should be fast, robust and cross-browser compatible, you do not have to look beyond the HTML5 Boilerplate. The world’s most popular frontend template is a result of the combined knowledge and effort of more than 100 developers, making it one of the most popular projects on GitHub. But before you skip this article to press the download button, you need to understand; what makes this framework so popular?
What’s new in 4.0?
The HTML5 boilerplate has hit version 4.0 and it is released with wholesome new features. Important ones are listed below:
- Optimised version of Google Analytics Snippet (from Mathias Bynens) which minifies to just 239 bytes and executes faster than the original code!
- Updated to the latest minified versions of two most commonly used libraries: jQuery (via Google’s CDN, with local fallback) and the Modernizr feature detection library.
- Includes Normalize.css v1.0, a modern HTML5 alternative to CSS reset which makes web page design more portable between browsers.
- The new version of HTML5 Boilerplate improves the bundled Apache compression configuration to help you deliver excellent site performance.
- A new example media query has also been added to make your website retina-ready as well as make it look consistent on different devices.
Check the CHANGELOG for more detail on what’s new.
Directory structure
Following is an hierarchical representation of the HTML5 boilerplate file tree as it exists inside the package.
/
css/
- main.css
- normalize.css
doc/
img/
js/
- main.js
- plugins.js
- vendor/
-- jquery.min.js
-- modernizr.min.js
.htaccess
404.html
index.html
humans.txt
robots.txt
crossdomain.xml
favicon.ico
[apple-touch-icons]
The project’s stylesheets, scripts and images are neatly categorised in separate folders, leaving enough room for apple touch icons, humans.txt, robots.txt and many more. All third party JavaScript plugins find their place in vendor directory.
The HTML5 boilerplate documentation is sufficiently detailed to help you organise your files and directories seamlessly.
Understanding index.html line-by-line
The default HTML page uses the latest HTML5 markup, with just 40 lines of code, weighing marginally less than 2KB.
DOCTYPE
Line 1: <!DOCTYPE html>
This line helps the browser understand that the code in the rest of the page should be rendered as HTML5. As per HTML5 guidelines, the doctype is case-insensitive, so <!doctype html>, <!DOCTYPE html>, <!DOCTYPE HTML>, and <!DoCtYpE hTmL>, for example, are perfectly valid.
However, to conform to the Polyglot Markup: HTML-Compatible XHTML Documents, which looks after the XML Serialization of HTML5 (i.e., XHTML5), the string DOCTYPE should be in uppercase and the string html in lowercase letters.
Conditional IE statements
Line 2-5:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->This is straight out of Paul Irish’s blog which targets each version of IE with a conditional expression and loads the class related to that version of IE.
Modernizer uses class="no-js". When Modernizr runs, it replaces that class with class="js" for every feature it detects, prefixing them with no- if the browser doesn’t support it.
HEAD
Line 7: <meta charset="utf-8">
This defines the web page character encoding as UTF-8, which is the recommended encoding for internationalisation. Notice the missing trailing forward slash "/>"? Yes, in HTML5, those self closing tags no longer need to be closed.
Line 8: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This line introduces the Google Chrome Frame that makes your web page work on older IE browsers in exactly the same way they are designed for the other modern browsers. This can be extended to detect GFC and prompt to install, if it is not already present.
Line 9: <title></title>
This tag should need no explanation.
Line 10: <meta name="description" content="">
This provides a clear description about the web page in search results.
Line 11: <meta name="viewport" content="width=device-width">
The viewport meta tag controls the manner in which a web page is loaded in the mobile browser. Although it’s not part of the web standard, it still helps the web developers understand the behaviour of their website in mobile browsers.
Line 13: <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
This is the no-html way to handle favicons. Make sure you read Mathias’s notes on touch icons, which describes how different browsers handle favicons in great detail. If this doesn’t entice you, simply place the favicon.ico and apple-touch-icon.png in the root directory and leave the rest of the work for the browsers to handle!
Line 15: <link rel="stylesheet" href="css/normalize.css">
A modern day HTML5 alternative to CSS reset by Nicolas Gallagher, which makes the browsers render all the elements consistently and precisely in-line with the modern standards. The type attribute is optional in HTML5 and by default assumes a text/css.
Line 16: <link rel="stylesheet" href="css/main.css">
Use main.css to style your webpage with added support for helper classes and media queries for responsive design.
Line 17: <script src="js/vendor/modernizr-2.6.2.min.js"></script>
Modernizr is a feature detection library for HTML5/CSS3. For best performance, you should have them follow after your stylesheet references. This ensures that the HTML5 Shiv (enable HTML5 elements in IE) must execute before the <body>, and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent a FOUC.
BODY
Line 20-22:
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> or <a href="https://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->A polite way to make user aware their browser is older than IE7, and suggest to either upgrade the browser or activate GCF.
Line 25: <p>Hello world! This is HTML5 Boilerplate.</p>
All your site’s content goes here. Feel free to use the semantic HTML5 tags, whenever and wherever you like.
Line 27-28:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>Grab the latest version of jQuery from Google’s CDN and provide a local fallback copy, if anything goes haywire.
Line 29-30:
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>Separate out site-specific JavaScript with all the plugins. Use Modernizer to load the plugins selectively and in a controlled manner. The type and language attribute of the script tag are optional in HTML5 and defaults are assumed.
Line 33-38:
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>Change UA-XXXX-X to your site’s ID for your Google Analytics account. This is the compressed code manufactured by Mathias Bynens to save those crucial extra bytes.
Lastly, both </BODY> and </HTML> are optional tags, but we still preserve them to maintain the semantic ethics of HTML5.
H5BP + Bootstrap – A deadly combination?
HTML5 Boilerplate (H5BP) and Twitter Bootstrap are doing different things but it is relatively easy to combine them. H5BP serves as a starter project template that easily adapts to your needs whereas Bootstrap is a specialised, modular, HTML/CSS/JS UI toolkit.
H5BP contains a number of best practices and common inclusions for your initial HTML template, which can be used like the generic default template. Bootstrap does not provide anything like this (nor does it need or aim to). So in this regard, H5BP is perfectly suited to including HTML components from anywhere else (e.g., those from Bootstrap).
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It utilizes LESS CSS, is compiled via Node, and is managed through GitHub. Bootstrap works well on both the desktop browsers (including IE7!) and the tablet/smartphone browsers via responsive CSS. Features a 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls and many more.
The Initializr project helps you to automatically integrate H5BP and Twitter Bootstrap. Mickael Daniel (a.k.a mklabs)—a contributor to H5BP who has done all sorts of work on the build scripts – has also put together Gist, a script that automates the combination of H5BP and Bootstrap.
Conclusion
You too can be a part of this amazing project by contributing on GitHub. Biggies like Google, Microsoft and NASA are already using this boilerplate for their projects. This leaves us with one last question: Are you ready to use H5BP too?
comments powered by Disqus
