HTML - <head> Tag

The head tag is an HTML component used to specify the headings of an HTML document. Metadata which is basically data about data is present in the head section. As a result, the information in the head tag is used by browsers and search engines but is not visible on the page itself.

In general, head tags contain elements like the document title, script or stylesheet links, and meta tags that describe the structure and content of the document.

The list of tags used in metadata is as follows −

S.No. Tags
1 title
2 style
3 meta
4 link
5 script
6 base

Syntax

Following is the syntax of <head> tag −

<head>
<title>Title of the document</title>
</head>

Specific Attributes

The HTML <head> tag also supports the following additional attributes −

S.No. Attribute & Description
1

profile

It defines the URL of metadata.
2

media

It indicates which media/device the media resource is optimized for.
3

type

It defines the media type of the <style> tag.

Example

Let’s look at the following example, where we are going to use the <title> tag inside the <head> section. 

<!DOCTYPE html>
<html>
<head>
   <title>Welcome to index page</title>
</head>
<body style="background-color:#D2B4DE">
   <h1>TutorialsPoint</h1>
   <p>The Best E-Way Learning.</p>
</body>
</html>

When we execute the above code, the output window will pop up, displaying the text along with the applied CSS on the webpage.

Example

Considering another scenario, where we are going to use the <style> tag inside the <head> tag.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background: #D5F5E3;
      }

      h1 {
         color: #17202A;
      }

      p {
         color: #DE3163;
      }
   </style>
</head>
<body>
   <h1>MSD</h1>
   <p>Mahendra Singh Dhoni is an former Indian cricketer. He was captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014.</p>
</body>
</html>

On running the above code, it will generate an output consisting of the text along with a CSS applied that is displayed on the webpage.

Example

In the following example, we are going to add the URL with a content value that redirects to the page when the time limit is over.

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="refresh" content="4; url=https://www.tutorialspoint.com/index.htm">
</head>
<body>
   <h2>Redirect to home page</h2>
   <p style="color: green;">After 4 seconds it will automatically redirect to URL specified in the tag</p>
</body>
</html>

When we execute the above code, the output window will pop up, displaying the text on the webpage. After the completion of the 4 seconds, the page redirects to the page of the link we mentioned in the meta tag.

Example

Following is an example where we are going to use the <script> tag inside the <head> tag.

<!DOCTYPE html>
<html>
<head>
   <script>
      function tutorial() {
         document.getElementById("tp").style.color = "#2ECC71";
      }
   </script>
</head>
<body>
   <h1 id="tp">TUTORIALSPOINT</h1>
   <p>The Best E-Way Learning.!</p>
   <button type="button" onclick="tutorial()">CLICK</button>
</body>
</html>

On running the above code, it will generate an output consisting of the text along with a click button displayed on the webpage. When the user clicks the button, the event gets triggered and changes the color of the <h1> tag text.

html_tags_reference.htm
Advertisements