The HTML Document Head

In your (X)HTML page, after your opening doctype and html tag, the next tag should be the opening of your document header using the head tag.

The Head section contains all of the header information for the page. Besides the content of the title tag, the rest of the information is usually not shown visually on the screen, but instead either gives certain readers (eg. screen readers, search engine spiders) additional information about the page, and also specifies how the page will work e.g. a call to a stylesheet, a call to a JavaScript etc.

The Page Title

The page title is set via the title tag. Anything that’s within this tag will be displayed in the top bar of your browser window. This is created with the code

<title>The HTML Document Head</title>

This is the title of the document and will tell everyone (and everything) what the page is about so it should be short but descriptive of the page, and ideally each page on your site should have a unique title.

There should only be one instance of the title tag, and a title tag requires both an opening and closing tag.

The Meta Information

The meta tag allows you to add additional information about the page without displaying this information on screen. The information is machine readable, and can be read by specific software and scripts such as search engine spiders.

A meta tag usually has 2 attributes. The second attribute is always ‘content’ however the first attribute can either be ‘http-equiv’ or ‘name’. You can have any number of meta tags in your header, however the more common ones are listed in the code below

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="Sarah" />
<meta name="copyright" content="Blogging Tips" />
<meta name="description" content="Your page description here, around 150 characters long" />
<meta name="keywords" content="Your relevant keywords go here in a comma separated list" />

As you can see above, we have 5 meta tags, the first uses the http-equiv attribute and sets the content type for the page (in plain text but served as HTML – text/html) and defines the character set (utf-8 above), the next 4 give additional information about the page, the author of the page, who owns the copyright, the description about the page and some keywords relevant to the page.

Unless the Content Type is set elsewhere the Content Type meta is a requirement (for example, it could be set by your web host but I would recommend you keep this tag in at all times). The other 4 meta tags are optional. You don’t need any of this information however to give additional information to the document, it’s a good idea to include them if possible.

Meta tags do not have a closing tag. In XHTML this means they need to be self closing ie. a forward slash goes at the end of the tag before the greater-than diamond bracket (as per the code above). For HTML 4.01 code, this forward slash shouldn’t be used.

The Link Tag

The link tag isn’t for anchor links (ie. typical clickable links), before you wonder! The link tag allows you to link to external files and include them into the site. Last week we covered how to link to a CSS Stylesheet e.g.

<link rel="stylesheet" href="http://www.yourdomain.com/path-to-css/style.css" type="text/css" media="screen" />

The link tag can accept a number of attributes however the most common of these are ‘rel’, ‘href’, ‘type’, and in the case of stylesheets, ‘media’. The link tag is used to link to a number of different files, the more popular ones are

• Stylesheets are the most common
• Favicons (Favourite Icons – this appears next to the URL in the address bar)
• RSS Feed files
• Pingback URLs (usually used on Blogs)

An example of each of these is

<link rel="stylesheet" href="http://www.bloggingtips.com/wp-content/themes/BloggingTips/style.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="http://www.bloggingtips.com/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="Blogging Tips RSS Feed" href="http://www.bloggingtips.com/feed/" />
<link rel="pingback" href="http://www.bloggingtips.com/xmlrpc.php" />

Here, the first line references the main stylesheet style.css. The second line is telling the browser where the favourites icon is, the third tells the browser and other software that may access the site, where the RSS feed can be found, and the last line contains the pingback URL.

You can have any number of links to different documents in your header, although typically you will only have one favicon link and one pingback link.

Link tags do not have a closing tag so should be self closing for XHTML. Link tags are also confined to the Header section. They should not be placed in the Body section of the document.

Internal Stylesheets

As explained last week, you can include an internal stylesheet in the header of your document using the style tags eg.

<style type="text/css>
body {
    background-color: #ffffff;
    color: #000000;
}
h1 {
    color: #ff0000;
}
</style>

You can have any number of these code blocks in your header, or alternatively you can usually (there are some exceptions) copy the rulesets out and place them into an external stylesheet and use the link tag as described above.

Style tags are also confined to the Header section. They should not be placed in the Body section of the document.

Client Side Scripts

Client side scripts eg. JavaScript, are loaded into the document using the script tag. Whilst this is not strictly confined to the document header, you will often find them in there (some scripts have to be called at the point where they are required, and others can easily go at the end of your document before the closing html tag).

The script tag should contain at least one attribute, which is the type attribute. For JavaScript this would be text/javascript. Scripts can be contained within the script tags, or an external file containing the script can be loaded into the document. This is similar to the way stylesheets can be loaded, except the script tag is used for both methods.

An internal script example is

<script type="text/javascript">
// JavaScript code goes here
</script>

Alternatively, you can have an external file with the JavaScript code in it, saved as file.js (for example) and this can be called with

<script type='text/javascript' src='/scripts/file.js'></script>

The script tag is not self closing and must always be closed with a subsequent end script tag.

You can also specify the character set of the script using the charset attribute eg. charset=”utf-8″.

Example Header

This then leads us to a final example header. Not everything in this header is always required, and you may need additional items not listed here. This should just give you an idea of what’s what and how things can look.

<head>
  <title>Your Page Title Goes Here</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="author" content="Sarah" />
  <meta name="copyright" content="Blogging Tips" />
  <meta name="description" content="Your page description here, around 150 characters long" />
  <meta name="keywords" content="Your relevant keywords go here in a comma separated list" />

  <link rel="stylesheet" href="http://www.yourdomain.com/path-to-css/styles.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="http://www.yourdomain.com/path-to-css/print.css" type="text/css" media="print" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="alternate" type="application/rss+xml" title="My RSS Feed" href="/feed-url/" />

  <script type="text/javascript" src="/scripts/file.js" charset="utf-8"></script>
</head>

Written by Sarah from Stuff By Sarah
Posted on October 30th, 2008 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

1