Web Foundations
By Rebecca Goodwin

Introduction to HTML5 Boilerplate

By Rebecca Goodwin

You may have seen the term ‘HTML5 Boilerplate’ being used around the internet for a while now, but if you had to actually talk to someone about the subject, would you know what you were talking about? More importantly, would you know how to use it?

What is HTML5 Boilerplate?

A boilerplate is a section of information that will be repeated or used many times with little to no alteration. This can be used in many different fields such as law, marketing and, obviously, programming. Think of a legal contract that starts off as a boilerplate contract and is then modified to create the final version.

The HTML5 boilerplate is just that – it is a HTML5 and a CSS3 template that is technically complete, can be used as is, but requires more addition to make it your own and to fit your needs.

It is a starting point.

What does the HTML5 boilerplate do?

The point of the HTML5 boilerplate is to make it easy for people to start working without having to write the base set of code that will be used on every site they work on.

Yes, there will be exceptions to this as you branch out into different libraries, but for most the boilerplate will be the base code and file structure they require for their project.

If you are a beginner and looking to explore HTML5 and CSS3, then using a boilerplate is a fantastic place to start. It will give you a context to work in and allow you to see things taking shape quickly. As you learn more, you will create your own boilerplate that suits your needs.

Why should I use it?

If you are beginning to learn how to code (try one of our fantastic learnable modules such as Layout building techniques with HTML & CSS), it is great to see the bare bones as they are. This means you can get a feel of the code and tags that will be used in every project and will help you get the basics down.

For the more advanced developer, your boilerplate will be the backbone of your work. You will know the intricacies of the code and more importantly, you will have built it in your own coding style and language. The file structure will suit your needs and the libraries you work with.

It can make your life easier! Your boilerplate can be as simple or as complex as you need. It can include crazy comments or your favorite snippets and file structures.

More importantly a boilerplate can be your starting point – you can make sure you know it inside and out so you can build on the basics!

Need some more information and starting points?

Check out HTML5 boilerplate for the most popular boilerplate as of writing. It includes a lot of information and is quite a large boilerplate, but it can be stripped back to the bare bones or used as is. It is great for a wide range of knowledge levels.

We have a tutorial for beginners looking to work in HTML5 and CSS3 – HTML5 & CSS3 for the Real World with Louis Lazaris, who also gave us an excerpt to start a basic HTML5 template. Try building your own today!