0%

<head> Document head

Metadata container for the title, charset, styles and scripts. Never displayed.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<head> is the first child of <html>. It carries information about the page instead of page content: the <title>, <meta> tags, links to stylesheets and icons, and scripts.

The browser displays none of it. Beginners sometimes drop a heading or an image in there, and the parser then moves that content into the body. The result can be confusing to debug.

Which metadata elements are allowed inside is listed in the specification of the head element (opens in a new tab). You split a page into its two halves yourself in the Head and Body lesson.

Syntax

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

When to use it

The head carries what the browser, search engines and social apps need before they show the page: the character encoding, title, viewport, stylesheets, icons, sharing tags and any script that has to load early. Put the charset first, then viewport and title, then stylesheets, then everything else. That way the browser can decode the file and start rendering sooner.

Keep it lean. Each stylesheet in the head, and each script without defer or async, holds back rendering until it arrives. Ten CSS files and five scripts up there make for a slow page. Move scripts to the end of the body or add defer unless they really must run first.

Templates and plugins love to add the same tag twice. Browsers use only the first <title> and the first <base> with an href, and a second charset declaration is invalid. Check the final page with View Source instead of trusting the template. The complete head project puts all the pieces together.

Live example

Edit the code and watch the preview.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Head demo</title>
</head>
<body>
  <p>The title is in the browser tab, not here.</p>
</body>
</html>

More examples

A complete head for a blog post

This head holds the tags almost every real page needs, in a sensible order: encoding, viewport, title, description and the stylesheet. None of it is visible, but the tab title and the styles from style.css show that it works.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>How to Store Bread - Sunny Bakery Blog</title>
  <meta name="description" content="Simple ways to keep bread fresh for days, from paper bags to the freezer.">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>How to store bread</h1>
  <p>Keep it in a paper bag, never in the fridge.</p>
</body>
</html>

Light and dark color scheme

The color-scheme meta tag tells the browser that the page works in both light and dark themes. Without any CSS, the default background, text color, form fields and scrollbars then follow the visitor's system setting.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <title>Settings - Night Owl Notes</title>
</head>
<body>
  <h1>Settings</h1>
  <label for="name">Display name</label>
  <input id="name" type="text">
</body>
</html>

Tip: Open the head with meta charset, then the title.

Browser support

The head element has been part of HTML from the start and is supported everywhere. Both of its tags are optional in the syntax, and browsers create the element even when you leave it out, but writing it keeps metadata clearly separated. Newer metadata such as the color-scheme meta tag is safely ignored by browsers that do not understand it.

Accessibility

Screen readers announce the page title before anything else, so the head needs a descriptive one (WCAG 2.4.2). Good and bad titles are compared side by side in the W3C note Understanding Page Titled (opens in a new tab).

Common mistakes

Wrong

<head>
  <h1>My Site</h1>
</head>

Right

<head>
  <title>My Site</title>
</head>
<body>
  <h1>My Site</h1>
</body>

Visible content goes in body. Put it in head and the parser closes head early and moves it out anyway.

Frequently asked questions

What should go in the head section of an HTML page?

Metadata, never visible content. A sensible minimum for the <head> is <meta charset="utf-8">, a viewport meta tag, a unique <title> and a <meta name="description">. The head is also home to <link> elements for stylesheets and icons, <style> blocks, <script> elements and, if you need one, a <base>. Our HTML SEO guide has a checklist of what search engines read from it.

What is the difference between head and header in HTML?

They do different jobs. <head> is the invisible metadata container and appears once, before <body>. <header> is a visible sectioning element inside the body for introductory content: a logo, the site title, maybe the navigation. You can have several <header> elements on one page, say one for the site and one at the top of each article.

Practise it

Related document elements

<global-attributes>Attributes you can put on any element: id, class, lang, title, hidden and others.<html>The root element. Every page's head and body sit inside it.<body>Everything visible on the page lives inside body.