References

Beginner-friendly references for web development, with live, editable examples.

The HTML <head> tag

Element All modern browsers Updated
Quick answer

The HTML <head> element contains the document's metadata: the <title>, <meta> tags, <link>ed stylesheets and icons, and <script>s. This content is not displayed on the page.

Overview

The <head> element is the document's metadata container, sitting before the <body>. The browser processes its contents but does not render them as page content. It is information about the document rather than the document itself.

A well-formed head has a conventional order: the character encoding (<meta charset="utf-8">) first, then the responsive viewport <meta>, a unique <title>, a meta description, and finally <link>s to stylesheets and icons.

Only metadata-type elements belong here (<meta>, <link>, <style>, <script>, <base> and the <title>), and there must be exactly one <title>.

Syntax

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title</title>
</head>

Example

Live example 
<head>
  <meta charset="utf-8">
  <title>About - CodeShack</title>
  <meta name="description" content="Learn about CodeShack.">
</head>

More Examples

HTML5 Basic Boilerplate

HTML5 Basic Boilerplate

458 0

Best practices

  • Put <meta charset="utf-8"> first, before anything that contains text.
  • Include the responsive viewport meta, a unique <title> and a meta description.
  • Keep exactly one <title> in the head.
  • Place only metadata elements here; visible content belongs in the <body>.

Frequently asked questions

What is the head element?
A container for document metadata (encoding, title, description, stylesheet and icon links) that the browser processes but does not render.
What goes in the head of an HTML document?
The charset meta, viewport meta, a <title>, a description, and <link>s/<script>s (only metadata-type elements).
How many title elements can the head have?
Exactly one. A document must have a single <title>.
What is the difference between head and body?
The <head> holds non-rendered metadata; the <body> holds the visible page content.
h6 header