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.
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.
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.
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
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.
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 to add comments if you make any major changes to the HTML. So when you come back you can remind yourself of what changes were made.
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
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 to get cracking on a new website.
Do you want to learn more about web design? Then subscribe to net, the world's best-selling magazine for web designers and developers.