IntroductionA few years ago, HTML 5 still wasn’t very well supported by most popular browsers so web sites were created mostly with XHTML or HTML4. I still have a folder on my machine filled with HTML templates for both XTML and HTML 4. Inside of it there are also templates for newsletters, micro-sites, responsive templates and whatnot. All of them were built by taking code from 2 or 3 different templates and look like Frankenstein’s code monster. Which is understandable, because there are several doctypes in HTML4 and XHTML which developers had to take into account. Setting up a template for a new project wasn’t the fastest thing to do. But now, with HTML5, things are different. HTML5 Boilerplate is a basic template for starting a new web project. It is used by some of the largest and most popular websites and companies for their websites and services, like Google, Microsoft and Nike. Boilerplate template is used in every GroupDocs related project as well, even for this blog.
Where to Get It?You can download the full version of Boilerplate template from the official website: http://html5boilerplate.com/. You can also can build your own optimized version of the template, choosing only the files you really need for your project here http://www.initializr.com/ For this tutorial I’ll use Initializr’s custom builder. I’ll go with the “Classic H5BP” settings for this one.
What’s Inside It?
HTMLBoilerplate template has really simple structure built from few folders for your project’s CSS, images and scripts. It alos includes the most popular CSS and JS frameworks, like jQuery, modernizr and Normalize. The full version has a lot of other useful things, but I’ll stick to the core files of the template and leave the rest to your own investigations. Let’s look what’s in the index.html file. Right after the HTML5 doctype, you’ll see a few <!–[if lt IE …]> statements. This is very useful feature and I’ve used it in almost every project I’ve worked on in the last 3 years or so. Those statements basically put specific classes on the <html> element depending on which IE version the client is using: .ie7, .ie8 etc. Those classes are very helpful when you need to override a CSS rule to fix a bug in IE7 for example. The content in the <head> of the document should be pretty self-explanatory. There a few <meta> tags for the document’s charset type, viewport and description. . Of course we have the CSS files included and after them we have another IE specific statement which runs HTML5shiv for legacy browsers which don’t have support for the new tags in HTML5 (header, footer, nav, etc.). Keep in mind that you might want to get rid of
before pushing the project to live, because it’s an option created by Microsoft mainly for development and testing purposes.
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1