HTML - <head> Tag

HTML <head> tag is used as a container for metadata and placed after the html tag. Metadata which is basically data about data 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.

Syntax

<head>
...
</head>

Attribute

HTML head tag supports Global Attributes of HTML

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

Attribute	Values	Description
profile	URL	It defines the URL of metadata.
media	media_query	It indicates which media/device the media resource is optimized for.
type	text/css	It defines the media type of the <style> tag.

Try to click the icon run button to run the following HTML code to see the output.

Examples of HTML head Tag

In the bellow examples we will see the usage of head tag with other child tags of head tag.

HTML title Tag in head Tag

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>

HTML style Tag in head Tag

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>

HTML meta Tag in head Tag

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>

HTML script Tag in head Tag

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>

List of elements can be placed inside head Tag

Tags	Description
<title>	The <title> tag is defined inside of the <head> tag, and it should be text-only.
<style>	HTML <style> tag contains style properties for an HTML document or part of a document as an internal CSS.
<meta>	The <meta> tag is used to provide such additional information.
<link>	HTML <link> tag specifies a relationship between the current document and an external resource.
<script>	HTML <script> tag is used to conatin the internal JavaScript code in HTML document.
<base>	This tag is used to define the base ULR or target the relative URLs.

Supported Browsers

Tag
head	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm