Forget not thy head!

Anton Peck | 3 July 2006

When researching and learning about web standards, it can be easy to get wrapped up in all the various important things that happen in the <body> of a webpage. Terminology like "semantic markup", "box model layouts", "DOM scripting", and a vast array of other things are enough to keep you so busy that you very well might end up neglecting one of your documents most important sections - the <head>.

Before we get started, it's probably worth mentioning that this writeup is targeted toward people who are just getting thier feet wet in the code area of creating web pages. Those with more experience may likely not see anything new.

Still, even I'm not innocent from having a few bad habits when it comes to the <head>, so perhaps the reminder will do us all some good.

Here's a quick rundown of what that all-important section should contain in order to provide a more search engine, and browser-friendly page:

Title and Page Information

A recommended proper format for a <title> should contain the site name, a seperating character, and the name of the current page visible in the browser window – all too often you see the same title used site-wide.

The seperating character is still a hot debate for some on exactly which character you should use. In most cases, a dash "-" should do just fine.

Meta Information

I recommend a minimum of three types (defined by using the NAME attribute within the META tag): copyright, keywords, and description.

Style and script

It's always a good idea to keep stylesheets and javascript pages linked externally from the head of your document, rather than using them inline. This may sound rather elementary, but good practice is still good practice.

Adding in a developers comment section is also nice, but not necessary. This can provide useful information for not only those viewing your source, but to remind yourself of the little important things when you go back and re-edit the code days, or even months later.

Example:


<head>

<title>Your Website Title - Title of the current page or subsection</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="{Copyright ©2006, Name or Company}" />
<meta name="keywords" content="{Describe your website with adjectives.}" />
<meta name="description" content="{Describe your website in a sentence.}" />

<style type="text/css" title="Default"> @import url(yourstyle.css); </style>
	
<script src="YourJavascriptEvents.js" type="text/javascript" language="javascript"></script>

<link rel="alternate" type="application/rss+xml" title="RSS" href="{Link to RSS Feed}" />
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />

<!--  Comment Block
	Have any notes or important things you'd
	like to save about your document?
	Try and keep them in a spot where they're easy to
	find when you want to review the site later.
	This is also helpful in having information available
	to those who view your source, to let them know
	right up front how you feel about sharing and/or
	stealing code and what your policies are on such matters.
-->

</head>

Permanent link | Filed under: HTML and XHTML

About the Author

Preferring to stay just under the radar, Anton is one of those individuals that you’ll find who is just as excited about drawing strange creatures as he is about interface design (when he’s not geeking out in the code or a quick game).

Also tending to dislike third-person writeups, he feels that maybe by talking to himself while typing this, you might learn more about him – except that you can’t hear him. He might appear rough on the outside, but once you get to know him, you’ll realize that he’s just plain crazy.

Visit him at antonpeck.com.

Articles by Anton Peck

11 Comments

| Post a comment | Comments Feed

James John Malcolm (AkaXakA) : http://akaxaka.gameover.com/

3 July 2006, 05:57 : Permanent link to comment

Good basic points Anton. One thing about the content-type meta tag: the server should be sending that along automatically anyway, so you don’t need to add it. Keep in mind that a clash of content-type is to be avoided!

It’s fun to note, that the < head > tag itself it implied in HTML 4.01, so you don’t actually need to add the tag itself!

(This also applies to < html > and < body >, and yes, it’ll still validate)
Peter Gasston : http://geek.petergasston.co.uk

3 July 2006, 05:57 : Permanent link to comment

More important even than the head is getting the DTD right; it can mean a great difference in time spent on cross-browser coding.

I recommend reading this:

http://www.w3.org/QA/2002/04/valid-dtd-list.html
trovster : http://www.trovster.com

3 July 2006, 06:10 : Permanent link to comment

I use two favicon link types, for cross-browser compatibility.
[link rel=”icon” href=”/favicon.ico” type=”image/x-icon”]
[link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”]

You can drop the language=”javascript” attribute from the script, as they’re not required (invalidate?).

I like using the DublinCore objects and the geo-based meta data.

Also, the other rel attributes are useful for users, information about these can be found on the W3C site
Billy : http://www.newsgoat.com

3 July 2006, 07:27 : Permanent link to comment

There’s also the school of thought that the page title should come before the web site title in the . That way, If I open 12 tabs from your web site, they don’t all say “Your Web…”.

Hmm, I just noticed this is exactly how Bite Size does it.
Chris Wible : http://www.mediafetish.com

3 July 2006, 13:07 : Permanent link to comment

Nice one. One thing I’ve been trying to do lately is to identify each portion of the head of my documents… like:—
blah blah blah

blah blah blah

blah blah blah

blah blah blah – and so on… I started doing that because some of the projects I do at work have quite a bit of stuff in the head – be it several different stylesheets or a ton of different javascripts, template markup tags or whatever – and my boss has to go through my work sometimes to make little tweaks. Since his stuff is as bare minimum as possible he sometimes looks at all the “junk” I put in my documents like “what the hell is this!?” (and ends up breaking stuff)

So I started heavily commenting every portion of my work and it has worked out pretty well. Even if it does bump up the file size a bit.
Chris Wible : http://www.mediafetish.com

3 July 2006, 13:09 : Permanent link to comment

Well, I tried to put the code in there and it got stripped out. Oh well. Guess I shoulda figured. Those blah blah blahs fall between commented sections – ha!
Anders : http://

3 July 2006, 23:06 : Permanent link to comment

Don’t use a dash for separating parts of the title! Many screen-reader users stop listening at the dash, because after the dash, normally, comes the name of the current application (Microsoft Internet Explorer or Firefox etc.)

BSS uses the vertical bar…
Small Paul : http://pauldwaite.co.uk/

3 July 2006, 23:49 : Permanent link to comment

“One thing about the content-type meta tag: the server should be sending that along automatically anyway, so you don’t need to add it.”

I don’t think any server automatically detects the character set of the documents it serves. The administrator should have configured the server to send the right one for each document, but if documents are self-describing then this is unnecessary, and the documents can still be displayed correctly if saved locally.

The Web Standards Project put up a nice article on character encoding declarations. I think it demonstrates (if not states) how messy the situation is.

“Don’t use a dash for separating parts of the title!”

There’s an article on title separators that includes sound files of Jaws reading out some commonly used ones. I think @ might be a good candidate, if you mention the document, then the site, as the document is “at” the site. Bit more meaningful than the other options, although perhaps not as visually pleasing.
Julie : http://carmentastreet.com

5 July 2006, 04:50 : Permanent link to comment

A note on the title tag: Putting the site name before the actual page title became a big problem for one of my sites after we realized that our internal search engine used the title tag as the heading of each entry on our search engine results pages. Now we have to go back and change each page because the actual title of the page is cut off for many results.

Please learn from my mistake so at least I feel that I’ve done the world some good with this mess!
Anton Peck : http://antonpeck.com

5 July 2006, 05:04 : Permanent link to comment

Excellent feedback everyone – we’re all here to help eachother out, and it seems to be working out well.

I’m intrigued now by the idea of putting the site name after the page title.

Since it always made sense to me to go “primary – secondary – tertiary” in a heirarchy of naming, I never realized that it should probably look more like a dictionary “last name, first” type of presentation.

Indeed, it makes a lot of sense. =)
Andy : http://www.redhotchilliproject.com

9 July 2006, 08:02 : Permanent link to comment

I read some time ago that there is an advantage in terms of search rankings if you place the page title before the site name. Whether this is true I am not sure, but for a site like a blog the page title is probably more relevant than the blog’s name, so it would make some sense.

With the increase in users employing the use of tabbed browsing, and for bookmark lists, use of favicon is well worth considering. It helps make tabs/bookmarks standout.

Commenting is closed for this article.