<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
Elements inside the
<head> do not appear in the browser window under normal circumstances.
<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>
<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>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
<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
<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
<head> … <link rel="stylesheet" href="styles.css"> <script src="page.js"><script> </head>
Additionally, or alternatively, it could include embedded stylesheets or scripts:
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.
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.
<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.