<head>

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.

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

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>

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.

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

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>

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

Attributes

Attributes

AttributeValueDescription
profileURLDefines the URL of metadata.
Not supported in HTML5.
mediamedia_querySpecifies what media/device the media resource is optimized for.New in HTML5.
typetext/cssSpecifies the media type of the <style> tag.New in HTML5.

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



请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部