HTML Document Head | The <head> Element

Understanding the <head> Element

The <head> element contains metadata and other information about an HTML document that helps browsers, search engines, and other software understand and process the page.

The document head commonly contains the page title, character encoding, metadata, stylesheet links, and other resources or settings. Unlike the <body>, the <head> is not the part of the document that contains the webpage's main visible content.

Head Element Syntax

The head element uses a start tag and an end tag and is placed inside the html element before the body.

<html lang="en">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Information and resources associated with the document are placed between the <head> and </head> tags.

Purpose of the Document Head

The document head provides information that helps describe, configure, and support the webpage rather than containing its main page content.

Information in the head can be used to:

Define the document title.
Declare the character encoding.
Provide metadata about the document.
Link external stylesheets and other resources.
Define internal CSS.
Load or reference JavaScript.
Specify a base URL for relative URLs.

Different elements inside the head perform each of these jobs, and the following tutorials examine them individually.

Head vs Header

The head and header elements have similar names but serve very different purposes.

The head contains metadata and resources associated with the HTML document:

<head>
  <meta charset="utf-8">
  <title>My Webpage</title>
</head>

The header element represents introductory or navigational content within the visible document:

<header>
  <h1>My Website</h1>
  <p>Welcome to my website.</p>
</header>

A header belongs within the document's body, while the document's head appears before the body.

In other words, the head is not the header displayed across the top of a webpage.

Elements Used in the Document Head

Several HTML elements are commonly associated with the document head, each providing a particular type of information or resource.

<title> — defines the document title.
<meta> — provides document metadata.
<base> — establishes a base URL for relative URLs.
<link> — establishes relationships with external resources, such as stylesheets.
<style> — contains internal CSS.
<script> — contains or references scripts.

These elements are covered individually in the next tutorials, so this page focuses on how they fit together as part of the document head.

The <title> Element

The title element defines the title of the HTML document.

<head>
  <title>HTML Tutorial</title>
</head>

The document title is commonly displayed in the browser tab or window and is also important when a page is bookmarked or represented in search results.

Every HTML document should have a useful title that describes the page. The next tutorial examines the title element in greater detail.

Metadata

Metadata is information about the document rather than the main content of the document itself. The meta element is commonly used to provide this information.

One of the most important examples declares the document's character encoding:

<meta charset="utf-8">

Other meta elements can provide information such as a page description or instructions that help control how a page is displayed on different devices.

<meta name="description" content="Learn HTML step by step.">
<meta name="viewport" content="width=device-width, initial-scale=1">

The meta tutorial later in this section explains the different types of metadata in more detail.

External Resources

The document head can establish relationships between the HTML document and external resources using the link element.

A common example links an external CSS stylesheet:

<link rel="stylesheet" href="/css/styles.css">

The browser can retrieve the stylesheet and use its CSS rules when rendering the webpage.

The link element can also describe other relationships and resources. These uses are covered in the Linking External Resources tutorial.

Styles & Scripts

CSS and JavaScript can also be associated with an HTML document from within the head.

Internal CSS

The style element can contain CSS rules directly within the HTML document:

<style>
  body {
    font-family: Arial, sans-serif;
  }
</style>

JavaScript

The script element can reference an external JavaScript file:

<script src="/js/script.js" defer></script>

Scripts can also appear in other appropriate locations in an HTML document. When a script is loaded from the head, attributes such as defer are often used so script execution does not unnecessarily interfere with document parsing.

Internal CSS and JavaScript are covered separately in the Adding Internal CSS and Adding JavaScript tutorials.

Complete Document Head Example

A typical document head may combine several of the elements introduced above:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Learn HTML step by step.">
    <title>HTML Tutorial</title>
    <link rel="stylesheet" href="/css/styles.css">
    <script src="/js/script.js" defer></script>
  </head>
  <body>
    <h1>HTML Tutorial</h1>
    <p>Learn how to create webpages using HTML.</p>
  </body>
</html>

The metadata and supporting resources are placed in the head, while the heading and paragraph that form the page content are placed in the body.

As you continue through this section, each major part of the document head will be examined separately.

Common Document Head Mistakes

Understanding the difference between document metadata and page content helps prevent many common mistakes involving the head.

Confusing the head element with the visible header element.
Placing normal page content such as headings and paragraphs in the head.
Placing the head outside the html element.
Placing the document head after the body.
Forgetting to provide the document with a useful title.
Leaving out important metadata such as the character encoding.
Adding metadata or resources without understanding what they are used for.

Keeping metadata and supporting resources in the document head while placing page content in the body creates a clear and predictable HTML structure.

Document Head Best Practices

A well-organized document head provides browsers and other software with the information they need while remaining easy for developers to read and maintain.

Place the head inside the html element before the body.
Declare the UTF-8 character encoding near the beginning of the head.
Give every page an accurate and descriptive document title.
Include metadata because it serves a specific purpose, not simply because it is available.
Use the link element appropriately for external resources and relationships.
Keep normal webpage content in the body.
Keep the contents of the document head consistently formatted and organized.

Starting with a clean and consistent document head makes it easier to add metadata and resources as a website grows.

Summary

The head element contains metadata, resources, and other information associated with an HTML document. It is located inside the html element before the body and is separate from the visible header element used within page content.

Elements such as title, meta, base, link, style, and script can perform different jobs within the document head. The following tutorials examine each of these elements and their role in building a complete HTML document.

The Document Head