html

head tag explained | Metadata in HTML

The <head> tag in HTML determines the head section of a document and it acts as a container. A Container that contains/holds the metadata of the HTML file. The most important thing about the <head> tag is that the majority of the stuff that goes in the <head> tag is hidden when we load a page because it contains the information related to the page like page title, the path of stylesheets, script files, and metadata.

Now you must be curious what is metadata? And what does metadata of the HTML file mean? The term metadata refers to “data about data” and metadata of the HTML file refers to the data that come within the <head> tag of any HTML document like <title> tag, <link> tag, and <style> tag, etc.

This article explain what is the HTML <head> tag? And What can we do inside the <head> tag?

<head> tag in HTML

The <head> tag is located between the <html> tag and <body> tag. It determines the header of any HTML document and it holds the document’s properties like title, meta tags, external links, etc. Now we will discuss different elements that we can write within the <head> tag one by one.

<title> tag in HTML

The <title> determines the title of any HTML document and it must be text. Write the title of any page wisely because it is very crucial concerning search engine optimization.

We will create a very simple HTML document and everything will be written within the opening tag <html> and closing tag </html>.

<!DOCTYPE html>
<html>
<head>
  <title>Head tag in HTML</title>
</head>
   
<body>
  <p>head tag explained for beginners</p>  
</body>
</html>

Within the <head> tag we write the title for our HTML document and within the <body> tag we write some content as well. It will show the following output:

When we run this document we observe that the title written within the <head> tag doesn’t appear on the document instead it adds the title to the browser’s toolbar as shown in the above-given snippet. While whatever we write within the <body> tag displayed on the document.

We are done with the <title> tag and now we will see how we can approach an external resource using an element of the <head> tag.

<link> tag in HTML

The <head> tag provides a very useful tag <link> which creates links of the current document with any external resource.

<link> tag takes two parameters:

  • “rel” for defining the relation type.
  • “href” for mentioning the external resource location.

Let’s consider an example where we will create two documents and then we will link them using the <link> tag.

First, we created a “CSS” file and added a simple code

.style{
    color: red;
}

Now we will create an HTML file and we will add the <link> element in the <head> tag:

<html>
 <head>
   <title>
      Head tag in HTML
   </title>
     <link rel="stylesheet"  href="head.css">
 </head>
 <body>  
    <p class="style">head tag explained for beginners</p>  
 </body>
</html>

The above code created the <link> tag in the <head> tag and it holds the path of the CSS file in its attribute “href” while the “rel” attribute determines that it is a stylesheet.

Now to style some HTML element from the CSS file, let’s give some class name to the <p> element so that we cann access it and give it some styling from the CSS file to verify either the linked file is working properly or not.

The output will go like this:

The output verifies that the <link> tag implemented the affect of the “CSS” file on the current HTML document.

<style> tag in HTML

The <style> element is used to set a style for the HTML page. The below-given example will describe the working of <style> element:

<html>
 <head>
  <title>
    Head tag in HTML
  </title>
    <style>
     body {background-color: royalblue;}
     p {color: red;}
    </style>
 </head>
 <body>  
  <p class="style">head tag explained for beginners</p>  
 </body>
</html>

The above code used a <style> tag to implement the royalblue color on the back-ground and red color on the text. The output of this code will look like this:

It is not a good practice to write the whole styling in the head tag. Either write the style tag at the end of the HTML file before closing the <body> tag or create a separate CSS file and import it.

<script> tag in HTML

We can use the script tag in the head tag as well. The <script> tag is used to write the JavaScript code. The below-given example created a function using the <script> tag in the <head> while a button is created in the <body>.

<html>
  <head>
   <title>
     Head tag in HTML
   </title>
   <script>
    function scriptFunction() {
    document.getElementById("Print").innerHTML = "Script Element";
   }
   </script>
  </head>
  <body>  
    <p id="Print" >head tag explained for beginners</p>  
    <button type="button" onclick="scriptFunction()">Switch</button>
  </body>
</html>

On successful execution of the code we will receive the following output:

When we click on the button it will switch the output from “head tag explained for beginners” to “Script Element” as shown in the below snippet:

<meta> tag in HTML

In HTML document <meta> is used to define page description, character set, etc. It wouldn’t be visible on the page however browsers, search engines utilized it to understand the additional information about the document.

<head>
  <meta charset="UTF-8">
  <meta name="JavaScript" content="Welcome to linuxhint.com">
</head>

We can perform many more functionalities using the <meta> element. For example, refreshing the page after every 30 seconds, providing the keywords, and so on.

Conclusion

The head tag is a container that contains information about the web page, meta descriptions, and links to external resources. Anything that it takes wouldn’t appear on the browser.

In this write-up, we have learned what is HTML <head> tag? and why it’s essential for HTML documents. Afterward, we discussed the major elements of the <head> tag along with their functionalities.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.