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 permalink
Without further ado, this is my boilerplate
<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" />
<!-- Your content goes here -->
You can also get the raw file directly from this GIST.
What is in this boilerplate permalink
It's a very basic boilerplate, with only the bare minimum that would come back in 99% of the projects.
- 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
<html>tag is the most important part and our main wrapper for everything. We define a
langattribute, in my version it's
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-8is 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.
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.
A very basic template, but something you'll need all the time. You can even use tools to have this as a shortcut.