Everytime when making a website I have to look up the standard HTML5 boilerplate/template again. To make it easier for myself and possibly others, this is the template that I currently use together an explanation of the various tags I use in it.

The Boilerplate

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>A Page - My Site</title>
  <meta name="description" content="Page description">

  <link rel="stylesheet" href="/style.css">
  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <meta name="theme-color" content="#8000FF">
</head>

<body>
  <script src="/script.js" type="module"></script>
</body>
</html>

Explanation

Here I will do a rough overview of the various tags used and their purpose.

1
2

<!DOCTYPE html>
<html lang="en">

The doctype and html tag are to indicate that the page is HTML and in English so that it renders properly.

1

<meta charset="UTF-8">

This indicates that we want proper unicode support otherwise some characters might fail to render.

1

<meta name="viewport" content="width=device-width, initial-scale=1">

The purpose of this line is to make sure the viewport is correctly sized for responsive web design. The initial-scale is to set the initial zoom level to one (required for safari).

1
2

<title>A Page - My Site</title>
<meta name="description" content="Page description">

These tags are fairly self explanatory but are still important if you want rich embed in for example Discord. If you want even more customizability for rich linking see the further resources down below, specifically about twitter cards and opengraph.

1

<link rel="stylesheet" href="/style.css">

Just the standard snippet for including CSS, I must admit that I forget the specific syntax for this quite often 😅.

1
2

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

The code necessary for specifying a favicon, modern browsers support svg favicons which can look much nicer.

1

<meta name="theme-color" content="#8000FF">

Theme color can affect various user elements around the website in supported browsers (think navbar etc.), especially important when making a PWA or similar.

1

    <script src="/script.js" type="module"></script>

In the body element we see the code for including some module based javascript, which is much nicer than non-module based JS. See also the MDN on this topic

Further Resources

This post and code was heavily inspired by this article but much more slimmed down to fit my needs.

For more information about what you can put in the <head> tags to ensure richer linking with for example opengraph or twitter cards joshbuchea/HEAD is really useful.

And of course the MDN Web Docs are an immensely useful resource when doing anything regarding web development.