The HTML <head> tag

Definition and Usage

<head> element is the container for metadata (data about data), located <html> tag and <body> tag between.

Metadata is data about the HTML document. Metadata is not displayed.

Metadata typically defines document title, character set, style, script, and other metadata.

The following elements can be placed in <head> within the

Detailed Description

<head> tag is used to define the document head, which is the container for all head elements.<head> elements can be used to reference scripts, indicate where the browser can find style sheets, provide metadata, etc.

The document head describes various attributes and information of the document, including the document's title, its location on the Web, and its relationship with other documents. Most of the data in the document head will not be displayed to the reader.

Every HTML document should include a head element, which must contain one title element.

<title> tag Defines the title of the document, which is the only required element within the head section.

See also:

HTML Tutorial:HTML Head

HTML DOM Reference Manual:Head Object

Instance

Example 1

A simple yet complete HTML document, with a <title> tag within the head section:

<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Try It Yourself

Example 2

<base> tag(Specifies the default URL and target for all links on the page), located within the <head>:

<html>
  <head>
    <base href="https://www.codew3c.com/" target="_blank">
  </head>
<body>
  <img src="pic/tree.png" width="150" height="161" alt="Tree">
  <a href="tags/tag_base.asp">HTML base tag</a>
</body>
</html>

Try It Yourself

Example 3

<style> tag(Add style information to the page), located within the <head>:

<html>
  <head>
    <style>
      h1 {color:red;}
      p {color:blue;}
    </style>
  </head>
  <body>
    <h1>A title</h1>
    <p>A paragraph.</p>
  </body>
</html>

Try It Yourself

Example 4

<link> tag(Linked to an external style sheet), located within <head>:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>I used a link style sheet for formatting.</h1>
    <p>I am too!</p>
  </body>
</html>

Try It Yourself

Global Attributes

<head> The tag also supports Global Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values: <head> Element:

head {
  display: none;
}

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support