Use Your <head>

First published on 2006-03-26, updated on 2008-11-15.

HTML documents start with a <head> section where some useful things can be provided.

Complete <head> Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
 <title>Use Your &lt;Head></title>
 <link rel="stylesheet" type="text/css" media="screen" href="/screen.css">
 <link rel="stylesheet" type="text/css" media="print" href="/print.css">
 <link rel="shortcut icon" type="image/png" href="/favicon.png">
</html>

Document Type Declaration

Also known as a DOCTYPE, this selects the mode major web browser use for your page:

Quirks Mode
Includes mistakes and bugs which became common during the 20th century.
Standards Compliance Mode
More accurately follows W3C standards.

Standards Compliance Mode is easier to work with when doing CSS layout. It can be triggered with a complete and modern document type. This is called DOCTYPE Switching or DOCTYPE Sniffing.

HTML 4 DOCTYPE

For nearly all documents, this is the best choice: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Primary Natural Language

The written language used by the document is set in the the lang attribute using Tags for Identifying Languages. Translation programs, text-to-speech and spellchecking have an easier job when this attribute is set.

The value for lang can be very complicated. But most of the time you’ll only need one or two pieces of data:

Language Subtag
Written language, such as English or French.
Region Subtag
Place, such as the United Kingdom or Canada.

To find codes for a specific language or region, use the IANA Language Subtag Registry.

HTML Language Examples

English as used in the United Kingdom: 

<html lang="en-GB">

Strictly speaking, the -GB there is redundant. But pages commonly use en by itself to mean English as used internationally: 

<html lang="en">

French as used in Canada: 

<html lang="en-CA">

For more examples and discussion, see Language tags in HTML and XML.

Title for the Page

The <title> element lets you supply some text to help users tell which page they are on. It is usually displayed at the top of a web browser and at the top of each result in search engine result pages.

HTML Page Title Example

<title>Use Your &lt;Head></title>

You must replace < with &lt; because HTML is not allowed in <title>.

Metadata

You can summarise a page by using the <meta name="description">. This is sometimes displayed as the sample text in search engine results. Keep it short and relevant.

HTML Metadata Example

<meta name="description" content="Ben 'Cerbera' Millard works with web technologies. He used to make GTA mods.">

http-equiv

Use real HTTP headers instead of <meta http-equiv="..."> tags.

Favourites Icon (favicon.ico)

An icon helps users identify your pages in tabs, Favourites, Bookmarks or History. You create a suitable image and link it to each page using <link>: 

<link rel="shortcut icon" type="image/png" href="/favicon.png">

If you use the Microsoft .ico format: 

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">

A common size for these is 16 pixels wide by 16 pixels tall.

Styling with External CSS

Cascading Style Sheets (CSS) provide a way to manage the appearence of an entire website from a single .css file. You link this to each page with a <link> element: 

<link rel="stylesheet" type="text/css" media="screen" href="/screen.css">

You can link to a printer-friendly stylesheet like this: 

<link rel="stylesheet" type="text/css" media="print" href="/print.css">

Recommendations