HTML5 Starting boilerplate template

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

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>  <script src="js/main.js"></script> </body> </html>

You can also get the raw file directly from this GIST.

What is in this boilerplate

It's a very basic boilerplate, with only the bare minimum 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 template, but something you'll need 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

HTML5 Starting boilerplate template

Comments (1)

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

HTML5 Boilerplate template

What is in this boilerplate

Thank you for reading, and let's connect!

Command Palette

Comments (1)

More from this blog

HTML5 Boilerplate template

What is in this boilerplate

Thank you for reading, and let's connect!