Today I want to go back to the basics when we start our websites: the boilerplate template.
A boilerplate 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.
What is in this boilerplate
It's a basic boilerplate, with only the bare minimum code 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, an essential HTML document
<html>tag is the most crucial 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 constantly recur.
- Meta charset, 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 author's name is not a mandatory field, but I like to include this.
- Meta viewport, I tend to include these since they ensure 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 is 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 basic HTML template, but you'll need boilerplate HTML all the time. You can even use tools to have this as a shortcut.