Use an HTML boilerplate to build faster and create standards-friendly sites every time.
(Image credit: html5boilerplate.com)
Welcome to Creative Bloq's guide to how to use a HTML boilerplate. When it comes to building a website, the underlying foundations are always typically very similar. So, instead of starting every new page from scratch it makes sense to use an HTML boilerplate that contains the essential HTML structure. It's a quick and easy way to start building any site, and it will save a lot of time and effort. (If you are starting a site from scratch, check out our favourite website builders).
Take a peek at the HTML code of a site or page and we guarantee you will see many of the same HTML tags (if you want to learn more, see our guide to HTML tags) that make up the basic structure of any web experience. Every webpage ever built will kick off with the <html> tag and it's almost certain that you will see the essential tags such as <head>, <title>, <body>, <p> plus many more.
And it's not just HTML tags that you need to think of. Web designers and developers will have to deal with the quirks of individual browsers. One browser will render certain HTML tags differently to another meaning that the layout of a page may look different in different browsers. Check out our perfect website layout post to get some essential tips on how to get your design right. And, choose carefully between web hosting services to make sure your site is spot on.
CSS and JavaScript are also a consideration. Again, not all browsers interpret these the same way. But, almost all of these issues can be eliminated with the use of a HTML boilerplate. And, the best bit is that before you start your latest project you know that it will simply work. The perfect way to kick-start any project.
What is an HTML boilerplate?
Boilerplates are similar to templates in the sense that they provide the elements needed to create the basis of a build. Typically, an HTML boilerplate is a set of files that provide a foundation for any website and will have been built by industry professionals, who have experienced the same issues and don't want others to have to go through the same problems.
Boilerplates commonly contain a range of file types associated with web builds, including HTML documents, basic CSS style sheets, essential JavaScript, placeholder images, and documentation on how to use what you've just downloaded.
Popular HTML boilerplates
To get yourself on the path to HTML heaven, the HTML5 Boilerplate is a great place to start. It describes itself as 'the web's most popular frontend template' and is a sleek and simple HTML template that boasts all the essential files and assets you need to start building straight away.
The latest version of HTML5 Boilerplate (v7) comes equipped with an index.html file that includes tags to accommodate essential mobile options, Google Analytics and a link to Normalize.css, which helps iron out browser inconsistencies. To get an idea of how HTML5 Boilerplate operates check out the video they put up on their YouTube channel. It is a few years old, but gives the the general idea of how the boilerplate works.
Another very popular option to explore is Bootstrap. This is a 'frontend component library', and is a far more comprehensive offering than the HTML5 Boilerplate framework. It boasts options for layout, content, fonts, typography and front-end components such as button, carousel, tooltips and much more.
But, if you don't want everything you can only download the elements you want for your build. Word of warning, Bootstrap is a very popular choice for many web designers and developers, so try to be a bit more imaginative when using its templates. You don't want to look like every other website.
Using HTML5 Boilerplate
When downloaded, this free, open-source boilerplate provides you with the basis of an html page (index.html), a couple of CSS stylesheets, key JavaScript files, an img folder to place images, a 404 page, configuration files and relevant documentation.
On the first download it's a good idea to make a copy, so you have a clean unedited version of the files, as a reference.
To get started first replace the favicon.ico and icon.png files with your logo – these will appear as your site's favicon and the icon when your site is saved to someone's iOS homescreen. An online generator can help you create new images.
In the HTML, there is a collection of tags that you will be familiar with and some things that you're not familiar with. For example, Modernizr may be something that you are not familiar with. This is 'JavaScript code that automatically detects the availability of next-generation web technologies'. This helps ensure your site stays up to date as best as possible. The final script element is for Google Analytics, this can be removed, but if you do use it simply add your own Google Analytics code.
Ideally, leave everything as you found it and concentrate on the <body> tag as this is where the content goes. Add content after the opening <body> tag and ideally before the <script> tags that come immediately after the <p> tags. Make sure the page has a <title> and fill in the 'content' value in the 'description' meta tag. This will give an introduction to what the site is about, good for SEO.
Note also that all links are relative in this document, and so you may need to change them to root-relative or absolute links if you start nesting web pages in folders. For example, <script src="js/plugins.js"> might need to become <script src="http://www.mysitename.com/js/plugins.js">. Also, it is good practice toadd comments if you make any major changes to the HTML. So when you come back you can remind yourself of what changes were made.
CSS edits
HTML5 Boilerplate is a great way to save time when creating new websites
Of the two CSS documents included with HTML5 Boilerplate, there's no need to touch normalize.css. This is the reset document that ensures all browsers start on a level playing field when it comes to your website. By contrast, main.css includes what the document terms 'opinionated defaults', including some basic styles for selections, horizontal rules, images, and forms, helpers for item visibility, and @media rules for responsive web design and print.
Everything here is fair game for updating, although carefully consider whether you should do so. There's an area set aside for the author's custom styles (ie, yours) or you could create an entirely separate CSS document and attach that to your HTML as well.
Whatever your choice, be mindful of how you'll deal with subsequent updates to HTML5 Boilerplate itself. If you edit any of the default main.css styles, changes made in future versions of HTML5 Boilerplate (which would either be added by replacing files, or replacing parts of files) won't necessarily come across to your site, or will override your own edits. Therefore, again make use of comments for any changes, thereby making later comparisons much easier.
Alternative boilerplate options
Based on HTLM5 Boilerplate, Initializr generates a clean customisable template for you
Once you gain experience, it's worth considering a custom build using Initializr, retaining the components you need and ditching those you don't. Also, if you're creating a WordPress site, explore a WordPress-specific blank theme, such as HTML5 Blank. These downloads and services are all free, so you can check out and experiment with them at your leisure.
Still, whatever you do, a little work and investigation now should save you a whole lot of time later, when you just pull out your boilerplate (safely stashed away in cloud storage) to get cracking on a new website.
Craig is an editor, writer and designer. He writes about design and tech, specialising in Mac, iPhone and iPad, and has written for Creative Bloq, Stuff, TechRadar, MacFormat, The Guardian, Retro Gamer and more. You can view more of his writing on his blog, Revert to Saved.
