[1] But first what is the “HEAD”?
The head of an HTML document is the part that is not displayed in the web browser when the page is loaded.
It contains information such as the page <title>, links to CSS, links to custom favicons, and other metadata.
[2] Ok, another unknown word: “METADATA”, what is this?
METADATA = data about the HTML.
These are things such as the author, and important keywords that describe the document, etc.
[3] Let’s start with something that goes before the <head>
And it’s the Doctype. The Doctype is a META TAG in HTML5 and it goes at the top of all your HTML pages.
<!DOCTYPE html>
[4] Charset
Don’t forget the Charset!
<meta charset=”UTF-8″>
[5] Viewport
Setting the viewport helps to make your website look good on all devices
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
[6]Title
A title should be used on all pages
According to w3schools: “The <title> element is required and it defines the title of the document”
[7] Description
A meta description is provided, it is unique and doesn’t possess more than 150 characters.
<meta name=”description” content=”Hi there twitter!”>
[8]Icon
A favicon can be added to a page:
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
There are lots of other icon types to consider, this is just an example
[9] Link
Link is one of the most important things! Sometimes we write the CSS file and somehow we forget to link it to the HTML file <link rel=”stylesheet” href=”my-css-file.css”>
[10] Script
As I mention a bit earlier, sometimes we write the JS file and somehow we forget to link it to the HTML file
<script src=”my-js-file.js” defer></script>