HTML - <head> Tag

Quiz

The HTML <head> tag is used as a container for metadata and is placed after the html tag. Metadata, which is essentially data about data, is present in the head section.Consequently, the information in the <head> tag is used by browsers and search engines but is not visible on the page itself.

In general, the <head> tag contains elements such as the document title, script or style sheet links, and meta tags that describe the structure and content of the document.

Syntax

Following is the syntax of <head> tag −

<head>
...
</head>

Attributes

The HTML <head> tag supports the 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.

Please try clicking the 'Run' button to execute the following HTML code to see the output.

Example: HTML <title> Tag in the <head> Tag

Lets look at the following example, where we will use the <title> tag inside the <head> section. In the examples below, we will see the usage of the <head> tag along with its child tags.

<!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>

Example: HTML <style> Tag in the <head> Tag

Considering another scenario, where we will use the <style> tag inside the <head> tag. This HTML code sets the background color and text colors for headings and paragraphs. It displays a heading 'MSD' and a paragraph about Mahendra Sign Dhoni, a former Indian cricketer and captain.

<!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>

Example: HTML <meta> in the <head> Tag

In the following example, we will add a URL with a content value that redirects to the page when the time limit is over. This HTML code redirects the user to a specified URL after 4 seconds. It displays a heading and a green paragraph informing about the redirection.

<!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>

Example: HTML <script> Tag in the <head> Tag

The following example uses the <script> tag inside the <head> tag. This HTML code changes the color of the heading 'TUTORIALSPOINT' to green when the button is clicked. It includes a script that modifies the style of the heading element.

<!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>

Head Tag Elements

Following are elements that can be placed inside the <head> tag, along with their descriptions.

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

Supported Browsers

Tag
head	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page