HTML <head> Tag

❮ Prev Next ❯

The <head> tag contains metadata (document title, character set, styles, links, scripts), specific information about the web page that is not displayed to the user. Metadata provides browsers and search engines with technical information about the web page.

The <head> includes the following elements:

The <title> tag defines the title of a web page (required). It may be confused with the <h1> tag, but they are different. The <h1> tag specifies the title of page content, whereas the <title> tag is metadata representing the title of the entire HTML content and not its content.
The <style> tag contains CSS code that defines how HTML elements should be rendered in a browser.
The <base> tag defines an absolute (base) URL for all relative URLs.
The <link> tag defines the relationship between the current HTML document and the resource to which it refers, or contains a link to an external style sheet. It can have two attributes: rel="stylesheet" and href.
The <meta> tag provides additional information (metadata) about HTML document. The <head> of a page can include different kinds of <meta> elements that may contain name and content attributes.
The <script> tag contains a script (generally JavaScript), or reference to an external file with scripts.This element may not be included in <head>. Sometimes, it is better to put it at the bottom of <body>. The <script> element may seem empty, but it's not.
The <noscript> tag defines an alternate text, which is displayed, if the browser doesn’t support scripts or scripts are disabled by the user.

Syntax

The <head> tag comes in pairs. The content is written between the opening (<head>) and closing (</head>) tags.

Example of the HTML <head> tag used with the <title> and <style> tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body{
        background-color: #d3d3d3;
      }
      p{
        color:  #1c87c9;
      }
      a{
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Paragraph</p>
    <a href="#">Link</a>
  </body>
</html>

Try it Yourself »

In the given example, the <head> tag is used with the <title> and <style> tags. The <title> tag defines the title of the document, which is displayed in the browser window. In the <style> tag the style of the document is defined: the background of the document is orange, the text in the paragraphs marked with the <p> tag is blue, and the links within the <a> tag are pink.

Example of the HTML <head> tag used with the <link> tag:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <p>The content of the page</p>
  </body>
</html>

Try it Yourself »

Result

In this example, we have provided a link to the document style.css in the CSS folder.

Example of the HTML <head> tag used with the <meta> tag:

<!DOCTYPE html>
<html>
  <head>
    <meta name="title" content="HTML and CSS Books">
    <meta name="description" content="HTML and CSS Basics for Beginners">
    <meta http-equiv="refresh" content="30">
  </head>
  <body>
    <p>The content of the page</p>
  </body>
</html>

Try it Yourself »

The <meta> tag contains metadata for search engines - meta title, meta description.

Attributes

Attribute	Value	Description
profile	URL	Defines the URL of metadata. Not supported in HTML5.
media	media_query	Specifies what media/device the media resource is optimized for. New in HTML5.
type	text/css	Specifies the media type of the <style> tag. New in HTML5.