The HTML head and title Elements

The <head> element contains information about an HTML page, while the <body> contains elements that the user reads, views, and interacts with.

There is only ever one <head> element on a page, and it is usually the first tag immediately inside the <html> element. Elements inside the <head> do not appear in the browser window under normal circumstances.

title

The <title> describes the primary purpose of the page. It exists nowhere else but inside the <head>. It should be the first thing you define in the document, after the basic structure of the page has been created.

<head>
    <title>Dudley Storey’s Home Page</title>
</head>

The <title> is used in several different contexts. It appears in:

The browser tab, next to the favicon
The primary link text for search results
Browser bookmarks
Printed web pages

Always make the title full, unique and descriptive. When making a web page for a company, include the company name and the subject of the page itself in the <title>:

<title>Immortan Joe's Car Shop – Vehicles for Sale</title>

Alternatively, the subject of the page can go first:

<title>Vehicles for Sale – Immortan Joe's Car Shop</title>

If you don‘t use the site name in the title, at least provide a context: ”Dudley Storey‘s Hobbies” is much more informative than “My Hobbies”; “Products | Running Shoes” is better than “Products” or “Shoes”

The title may also relate to the filename of the HTML page, but it doesn‘t have to.

Use Your Head

The <head> is used for many other purposes. At a minimum, it should include the following meta tags, written before the title:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    …
</head>

The meta tags, in order:

Set character encoding for the document
Set correct scaling of the page on mobile devices

Optionally, if you are aiming to support Internet Explorer before version 11, include the following in the <head>:

<meta http-equiv="x-ua-compatible" content="ie=edge">

…which forces IE versions 9 and 10 to modern web standards (at least, the standards they were capable of when they were made).

Traditional Uses of The Head Element

Traditionally, the <head> has also contained links to stylesheets and JavaScript:

<head>
…
    <link rel="stylesheet" href="styles.css">
    <script src="page.js"><script>
</head>

Additionally, or alternatively, it could include embedded stylesheets or scripts:

<head>
…
    <style>
        // CSS here
    </style>
    <script>
        // JavaScript here
    </script>
</head>

However, HTML5 does not require these elements to appear in the <head>. Today, they are frequently relocated lower down on the page, inside or below the <body>. This is done to reduce blocking.

Head-Block

Since pages are read and interpreted by a browser from the top down, lengthy scripts or styles in the <head> can slow down or block page rendering. By moving these elements below the <body>, the page can, in principle, render faster.

For basic web pages, keeping styles in the <head> is still a good idea; placing scripts at the bottom of the page is a best practice.

In more advanced web development, the scripts and styles may be located both in the <head> and lower down on the page, with code that influences the look of the page “above the fold” - that is, the portion of the page that the user initially sees when it loads - left in the <head>, and the rest, affecting the remainder of the page, left lower down.

A minimal <head> section would therefore consist of:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Your Page Title Here</title>
</head>

Rendering by Kai C. Schwarzer, used under a Creative Commons license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.