The head tag is positioned right after the <html> element and needs to be closed before we open the <body> tag, there can be only one head tag for each page and it includes all info that needs to be loaded before the page content, it's basically a page header.
In it we can include very important data like the page title, links, CSS styles, the meta data that will be worked by the search engines, scripts and more.
These data will not be shown in the page but are vital for the page to work correctly, for the SEO of the page and its position in the search engine result page. When designing a new webpage a lot of importance is usually given to the page content, that is correct but without a proper head tag we will struggle to position our page in most search engines.
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<h1>Heading text</h1>
<p>Paragraph</p>
</body>
</html>
The page title is written within the <title> tag, this tag can only be placed within the head element and can be long as much as we can, however it is recommended to keep it short to avoid it won't show entirely in the SERP (usually 10-70 characters and best within 55-66 characters).
It needs to be explanatory of the page content, the keyword used in it has the maximum importance for the user that will click the search result and for the search engine.
See the example of our homepage:
<title>Code Island - How to create a website using HTML, CSS, SEO and more</title>
<meta name="Description" content="Code Island provides tutorial guides on how to create a website in HTML using CSS, SEO and Javascript. Create apps with Python and database with SQL">
<meta name="Keywords" content="how to create a website, html tutorial, css tutorial, SEO, SQL">
Here an example of how CodeIsland is seen by Google via the title tag and the meta description and how title appears in the browser.
There are several meta tags, the attribute name identify the meta tag to use, the attribute content defines the value of it. See examples.
The most important is certainly the meta description that is shown in the SERP to describe to users what the page is about. It is usually longer than the title and descriptive, for SEO reasons it is always good to have a unique meta description for each page.
The best would be to have a description within the range of 70-160 characters.
The meta keywords was used in past for SEO, due to practice of keyword stuffing it was completely disregarded by Google ...........and yes, i use it because i'm nostalgic .......... but some says that it doesn't hurt and in future i can always use it to built an alternative search functionality inside the website.
Another meta to use is the meta charset, the most used value for it is utf-8 that is the most complete universal character set that can handle all human languages.
Here below Title and meta tags used in this page:
<title>Code Island - The head tag</title>
<meta name="Description" content="The HTML head tag element define the header of a webpage, in it you can store the page title, the meta tags, links, CSS styles and script that need to load before the actual page content.">
<meta name="Keywords" content="html, head tag, head, head element, meta tag, css styles">
<meta charset="utf-8">
The link tag in the <head> element is used for different purposes, one of the most common is to link a CSS stylesheet to the webpage . In this case we use the attribute rel with value stylesheet and href to identify the location of the CSS file.
CSS styles can be added directly in the <head> element but these will apply the singular page, see Embedded Internal CSS.
We can use link tag also to the favicon, the icon shown on top of the browser, in that case the rel tag will be "icon" and we will need to add href for the location of the icon and type according to which type of format we want to use (.ico, .gif, .png). See the example of how it was done for CodeIsland.it
Developers nowadays are setting up more favicons that are applied according to the device visiting the page.
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="https://www.codeisland.it/img/cifavicon.png">
