In this article, we will take a closer look at the head tag, which is one of the key elements of a well-formed HTML document. Each web page contains a Doctype, an HTML element, a head, and a body.
The doctype declares the HTML version and is needed for the web page to be rendered correctly by the browser. It appears at the top of the page in the following format:
<!DOCTYPE html>The HTML document starts after the doctype declaration and is encompassed in opening and closing html tags. Inside the html tags come the head element and, afterwards, the body element. Although there are many more HTML elements, the aforementioned elements are sufficient to build a (basic) working HTML page.
The bare structure of a basic HTML page looks like this:
<!DOCTYPE html>
<html lang="en"> <!-- html element declaring the page's language -->
<head>
<!-- head elements here -->
</head>
<body>
<!-- body elements here -->
</body>
<html>A quick way to create this structure in your IDE is to type html:5 and then press <return>!
What Does Head Mean in HTML?
Like in anatomy, the head in HTML sits above the body. While it is easy to spot the various attributes of our bodies, we can’t see what’s going on inside a person’s head. It is similar to the head and body elements in HTML. Everything inside the body element is displayed on the web page. But the contents of the head element are not displayed on the page. To see them, you must inspect the page using the browser’s Devtools or look at the source code.
What is the HTML Head Tag Used for?
How important can the contents of the head element be if they are not even displayed? Can’t we just leave them out? Regarding the information for the browser to display the page correctly, the head is the most important element of all and, therefore, can’t be left out!
The head element contains so-called metadata about the HTML document and defines several important attributes. The following elements can be placed inside the head element: title, style, meta, link, script, and base. Each of them is described below.
The title HTML element
The title element is required and contains the title of the web page. It is shown in the page’s tab, as well as the bookmarks if added. It is also very important for search engine optimization (SEO). Using a precise and meaningful title ensures that the page can be found through relevant searches.
The style HTML element
The style element can be used to define the style of an HTML page. However, it is preferable to do this in a separate style sheet and add a link to this file in the header.
The link HTML element
The link element contains links to external resources needed to display the page as intended. Here you can link to your style sheet. If you are using a framework, e.g. Bootstrap or Bulma, these style sheets are also listed here. In this case, it is very important to list your own style sheet after the framework’s stylesheet. Otherwise, your own styles will be replaced! The browser reads the file from top to bottom and applies the styles in the order they are placed both within the .html-file and inside their own files.
It is also highly recommended to use a favicon. While you can place the link to your favicon anywhere inside the head element, it is recommended to place it together with the other links. Like the title, the favicon is displayed in the page’s tab and bookmarks menu. If you don’t add a favicon, the Devtools will nag you with a message that the favicon couldn’t be found.
The meta HTML element
The meta element is both used to give the browser important information about how to render the page and to list several keywords for SEO. Below, the most commonly used meta tags are listed.
meta charset
Indicates the character encoding in which the document is encoded, e.g. UTF-8.
meta author
Indicates the name of the document’s author.
meta description
Should contain a short and precise summary of the content. Used for SEO, and by some browsers, for the description of bookmarked pages.
meta keywords
A comma-separated list of words relevant to the page’s content.
meta viewport
Instructs the browser how much space to use to render the page on the user’s currently visible viewport. The default value is:
<meta name = "viewport" content="width=device-width, initial-scale=1.0">This causes the browser to always use the available width to render the page with a ratio of 1.0 between either the device-width in portrait-mode or the device-height in landscape mode and the viewport size.
Other possible viewport attributes include maximum- and minimum-scale, user-scalable, and height, but they are either not used by any browser (height) or can be ignored by browser settings. It is sufficient to use the values given above.
The script HTML element
The script element is used to embed executable code. In most cases, this refers to JavaScript, although other languages can also be used. If you are using 3rd party scripts, e.g. for Bootstrap or Font Awesome kits, it is important to list them before your own scripts. Below is a description of the most used attributes for the script element.
The src attribute
For your own scripts, it is sufficient to indicate the src attribute, which specifies the URI of the script.
The type attribute
For HTML5, it is not necessary to indicate the type of the (JavaScript) script.
The noscript attribute
This script specifies which content should be displayed if a script is unsupported or if scripting is turned off in the browser.
The defer attribute
If a script prevents the browser from parsing the complete document and therefore increases the time before the page can be rendered, the script can be deferred. The script will be executed once the document has been parsed.
The async attribute
Similar to the defer attribute, async can eliminate parser-blocking JavaScript. It instructs the browser to fetch the script while also parsing the page. The script will be run as soon as it is available.
The crossorigin attribute
Third-party scripts contain this attribute, which is related to Cross-Origin Resource Sharing (CORS). A discussion of these settings is outside the scope of this article.
The integrity attribute
The metadata of this attribute can be used to verify that the script has not been tampered with.
The nonce attribute
If you want to ensure that no scripts can be injected into your site, you can use nonces together with a content-security policy (CSP). Scripts without a valid one won’t be executed.
HTML Head Example
Below is an example of the header for a webpage using some meta attributes, a favicon, Bootstrap CSS, a Font Awesome kit, an external style sheet, jQuery, and dayjs. For Font Awesome, the actual kit was removed and replaced with a placeholder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,
initial-scale=1.0"/>
<meta name = "description" content="Interactive frontend
milestone project about the 2021 F1 season for Code Institute's
Diploma in Software Development">
<meta name="keywords" content="F1, formula 1, formula one">
<meta name="author" content="Scott Boening">
<title>Vroom</title>
<!-- Favicon -->
<link rel="shortcut icon" type="image/jpg"
href="./assets/images/favicon.ico">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/
dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZC
xYbOOl7+AMvyTG2x" crossorigin="anonymous"/>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/your_kit.js"
crossorigin="anonymous"></script>
<!-- My CSS -->
<link rel="stylesheet" href="assets/css/style.css"/>
<!--Load jQuery...-->
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.6.0/jquery.min.js"></script>
<!--Load dayjs-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/
dayjs/1.10.6/dayjs.min.js"
integrity="sha512-bwD3VD/j6ypSSnyjuaURidZksoVx3L1RPvTkleC48SbHCZse
mT3VKMD39KknPnH728LLXVMTisESIBOAb5/W0Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
.
.
.
</html>Difference Between Head and Header in HTML
If you are new to coding, all those similar names can be confusing. There are heads, headers, and also headings. How to tell them apart? If the name can be found in an anatomy book, like head and body, it refers to the essential elements of a webpage. Without them, the page is incomplete and won’t be loaded! (Head and body are the only anatomical parts that can also be found in an HTML document. So far, web pages have neither feet (but footers!) and no brains ;-).) Everything else refers to elements inside the body of the webpage.
Header refers to content at the top of the page, which gives either an introduction to the page content or – in most cases – navigational aids to help users browse the site. In addition to these links, it can also contain a logo and a search form. While header is the term we use to describe this element regarding its place and function inside the HTML document, the user browsing the site usually refers to it as the navigation bar or navbar.
Just for completeness, headings in HTML are the same as in normal text documents. They come in six sizes (1 being the biggest and 6 the smallest heading), and each webpage should only contain one h1 heading.
Difference Between Head and Body Tag in HTML
The head element does its very important job, mostly unseen by the user in the background. The only exceptions are the favicon and the title, which can be seen in the page’s tab and in the bookmarks. Everything inside the body is displayed on the page to be seen by the user. Some content might be hidden at first and will only be displayed through actions by the user, but every content inside the body of an HTML document is meant to be seen. What can you place inside the body? Basically, anything. Text, images, video, forms, lists, tables. This will be described in more detail in a separate blog article about the HTML body.
Scott Böning, Code Institute Graduate
Where can I learn HTML?
There are numerous ways to learn HTML. Code Institute teaches it as part of its Full Stack Software Development diploma. We also teach the basics of HTML for free through our 5 Day Coding Challenge. After just one hour a day over five days, you will have built your first ever web page.
Take your first step in learning some of these skills. Register for our 5 Day Coding Challenge through the form below.
Try our Free 5 Day Coding Challenge 
Take our full stack course 
