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
|
|
Explanation
Here I will do a rough overview of the various tags used and their purpose.
|
|
The doctype and html tag are to indicate that the page is HTML and in English so that it renders properly.
|
|
This indicates that we want proper unicode support otherwise some characters might fail to render.
|
|
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).
|
|
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.
|
|
Just the standard snippet for including CSS, I must admit that I forget the specific syntax for this quite often ๐ .
|
|
The code necessary for specifying a favicon, modern browsers support svg favicons which can look much nicer.
|
|
Theme color can affect various user elements around the website in supported browsers (think navbar etc.), especially important when making a PWA or similar.
|
|
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.