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.