HTML <head> Tag

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.

Syntax

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

The <head> includes following elements:

  • The <title> tag defines the title of a web page (required)
  • 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.
  • The <meta> tag provides additional information (metadata) about HTML document.
  • The <script> tag contains a script (generally JavaScript), or reference to an external file with scripts.
  • The <noscript> tag defines an alternate text, which is displayed, if the browser doesn’t support scripts or scripts are disabled by the user.

Example

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

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

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

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

Example

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

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.

The <head> tag supports Global Attributes and Event Attributes.