Deutsch
HTML, mobile & accessibility

HTML head

Also known as: <head>, head element

The HTML head, written as the <head> element, holds machine-readable metadata about a document. It is the first child of <html>, sits before the <body> and is not displayed as page content. Browsers and search engines read it for details such as the title, the character set and linked files.

What goes in the head?

A document has only one <head>. MDN lists the elements it commonly contains: <title>, <meta>, <link>, <style>, <script>, <base>, <noscript> and <template>. In a normal document exactly one <title> element is required.

The head differs from <header>. The <header> element is a visible section inside the body, for example with a logo and navigation.

What does Google read in the head?

Google documents the tags it supports. They include description (source for snippets), robots and googlebot for crawling and indexing, viewport, charset, and google-site-verification for Search Console. The keywords meta tag is not used by Google Search and has no effect on indexing or ranking. Google also states that the head section must be valid HTML so that the tags can be read reliably.

Example

HTML
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Running shoes | Example Shop</title>
    <meta name="description" content="Running, hiking and everyday shoes with delivery in two days.">
    <link rel="canonical" href="https://www.example.com/shoes/">
  </head>
  <body>…</body>
</html>

Common mistakes

  • Several <title> elements. One is the rule.
  • Invalid markup in the head, for example elements that do not belong there, which can cause tags to be misread.
  • Maintaining meta keywords, which Google ignores.

FAQ

Is the head required? A <title> inside the head is required. The head’s start and end tags may be omitted under certain conditions.

What is the difference between head and header? <head> contains metadata and is invisible. <header> is a visible content section in the body.

Sources

  1. <head>: The Document Metadata element – MDN Web Docsdeveloper.mozilla.org
  2. Meta tags that Google understands – Google Search Centraldevelopers.google.com

Last updated: