How to use an HTML boilerplate

If you're new to web design, don't try to reinvent the wheel. Start each site from a great foundation with HTML5 Boilerplate.

HTML5 Boilerplate screengrab

Using an HTML boilerplate saves you from starting from scratch every time you build a site

We're sure that every web designer would like to think of the sites they create as being unique. That's likely true from a content and design perspective, but the underlying foundations of the vast majority of sites are very similar.

Typically, people creating sites want to deal with the quirks of individual browsers, stripping out any proprietary styling such software might add to specific web-page elements; additionally, they may use scripts for dealing with the shortcomings of older browsers; furthermore, they might drop in basic default styles, for the likes of horizontal rules and elements that are supposed to be hidden.

Doing this again and again for every project is a massive waste of time and energy. Not only will you mostly be repeating yourself, but also you might make unique errors during every attempt to start afresh. Also, for some people, there will be the horror of a blank document, and simply not knowing where to start. If you're smart, you'll not attempt to reinvent the wheel when others have done the work for you, and you'll use an HTML boilerplate.

01. What is an HTML boilerplate?

An HTML boilerplate is a set of files that you can download, which provide a foundation for any website you care to create. Typically, they have been built by industry professionals but freely released to the community, so you can use them as the basis for your own projects. Not only does this speed things up, but you get the security of knowing that the basics of your site are sound.

Note that the term 'HTML boilerplate' doesn't mean you just get an HTML document or even a bunch of them. Boilerplates may contain a range of file types, including HTML documents, but also adding CSS, JavaScript, placeholder images, and documentation on how to use what you've just downloaded.

02. Popular boilerplates

HTML5 Boilerplate is a good place to start. The self-described "web's most popular front-end template", it's a sleek and simple HTML5 template that's the result of the pooled knowledge of many dozens of developers. It provides the basic scaffolding or framework for building an entire website.

There are alternative methods, which happen to provide more assistance. Bootstrap, Web Starter Kit and Skeleton add things like a typography base and responsive grid, giving you a further head-start when working on your design. However, they do so at the expense of additional default code, which you may find yourself having to edit or override.

There are also arguments that rather too many designers in recent years have relied heavily on Bootstrap, thereby resulting in many sites looking alike. Using a simpler foundation and going your own way could therefore be a better choice, depending on your level of ability, confidence and needs.

03. Advanced boilerplates

Based on HTLM5 Boilerplate, Initializr generates a clean customizable 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, and so you can check out and experiment with them at your leisure. For now, though, we're going to concentrate on HTML5 Boilerplate.

04. Using HTML5 Boilerplate

This free, open-source boilerplate when downloaded provides you with documentation and licensing in Markdown format, some CSS, two placeholder images, two HTML files, some JavaScript, and some server config files.

What you get when you download HTML5 Boilerplate

On downloading the archive, make a copy and keep it clean and untouched. It can then serve as reference for any changes you make. For the new site you're working on, you can ditch all of the .md documents. You'll also want to replace the two .png files with your own, otherwise the HTML5 Boilerplate logo will appear as your site's favicon and also the icon when your site is saved to someone's iOS Home screen. An online generator can help you create new images.

Regarding the HTML, there might be some things in there that you're not familiar with. The majority of these additions deal with issues relating to legacy browsers; the final script element is for Google Analytics and can be removed entirely if you don't use that. Leave the other script elements that are found towards the end of the file, because they load jQuery.

Otherwise, beyond adding content to the body of the document, after the 'Add your site or application content here' comment, you'll need to give the page a title and fill the 'content' value in the 'description' meta tag.

As well as adding your page content, you'll need to add a title and description tag

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.

Remember you can add comments if you make any major changes to the HTML, to remind yourself later.

05. CSS edits

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.

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 to get cracking on a new website.