HTML5 Starting boilerplate template

— 4 minute read

Today I want to go back to the absolute basics when we start our websites: the boilerplate template.

What a boilerplate stands for is a quick copy-paste HTML document that is the bare minimum to get started.

In this article, I'll share my version of the HTML5 boilerplate with you guys and explain the parts that are to it.

HTML5 Boilerplate template

Without further ado, this is my boilerplate:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Daily Dev Tips Boilerplate</title>
    <meta name="description" content="Basic HTML boilerplate" />
    <meta name="author" content="Daily Dev Tips" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <!-- Your content goes here -->
    <script src="js/main.js"></script>
  </body>
</html>

You can also download the raw template file directly from this GIST.

Download the HTML5 boilerplate

What is in this boilerplate

It's a very basic boilerplate, with only the bare minimum code that would come back in 99% of the projects.

Generic elements

  • Doctype: The doctype is very important as it tells a browser what kind of document it's looking at. In our case a basic HTML document
  • The <html> tag is the most important part and our main wrapper for everything. We define a lang attribute, in my version it's en (English).

Head section

We then come to the head section, which can be vastly extended, for me these are the basics that always recur.

  • Meta charset, almost in all cases UTF-8 is the character encoding we use, so I like to have it set to that.
  • Title: What is our document called, this is the page title that shows in your tab
  • Meta description: A short description of our page
  • Meta Author: The name of the author, it's not a mandatory field, but I like to include this.
  • Meta viewport, I tend to include these since they make sure your page behaves well on mobile. This one is the most generic one that will scale to the device size.
  • Link to our stylesheet, in this case, the stylesheet is called style.css and sits in the css folder.

Body section

Then the main part where most of our content will go, the body of our HTML document.

  • I've added an HTML comment where you can start your site's structure.
  • Then I add the script as low as possible, it loads a script called main.js from the js folder.

That's it.

A very basic html template, but you'll need boilerplate html all the time. You can even use tools to have this as a shortcut.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter