The Speed Coding

HTML <head> Tag


Example

A simple HTML document, with a <title> tag inside the head section:

<!DOCTYPE html>
<html lang="en" >
<head>
  <title>Title of the document</title >
</head>
<body >

<h1>This is a heading</h1>
<p > This is a paragraph. </p>

</body >
</html>

More "Try it Yourself" examples below.


Definition and Usage

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

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

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The following elements can go inside the <head> element:


Browser Support

Element
<head> Yes Yes Yes Yes Yes

Global Attributes

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


More Examples

Example

The <base> tag (specifies a default URL and target for all links on a page) goes inside <head>:

<html>
<head >
  <base href="https://www.thespeedcoding.com/" target="_blank">
</head>
<body >

<img src="images/stickman.gif" width="24" height ="39" alt="Stickman">
<a href="tags/tag_base.html" > HTML base Tag</a>

</body>
</html >

Example

The <style> tag (adds style information to a page) goes inside <head>:

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

<h1>A heading</h1 >
<p > A paragraph. </p>

</body >
</html >

Example

The <link> tag (links to an external style sheet) goes inside <head>:

<html>
<head >
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body >

<h1>I am formatted with a linked style sheet </h1>
<p>Me too!</p >

</body>
</html >

Related Pages

HTML tutorial: HTML Head

HTML DOM reference: Head Object


Default CSS Settings

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

head {
  display: none;
}