As promised last week, we’ll be talking about the head of an XHTML document (get the title of this post now?). The head of a document will not show any output into the body of the document (unless it’s being manipulated with CSS or Javascript, but the head won’t directly output anything). It mostly contains “meta data”-type stuff; to describe certain things about the document.
There are many tags you can add to the head of your document. Let’s take a look at our basic XHTML document again:
[code='xml']
Hello world!
[/code]
What we’re looking at is the part between the <head> and </head> starting and closing tags. Currently we only have one tag, the required title tag. Unlike the body of a document, there are only a few tags that are permitted in the head of the document. These tags are title, link, meta, style and script. Although you are limited to the tags you can add to the head, there are pretty much an infinite number of ways to use these tags. Let’s do a rundown of the most commonly used uses for these tags:
Adding a Title to your Document
Adding a title to your document is one of the most important things to do, so users see something more descriptive than “Untitled Document” in their browser’s title bar and on search engines. Document title’s should be kept under 64 characters (as that’s where many browsers will truncate them) and be descriptive of the document (while still being concise). For example, I would consider this a good title format for a webpage:
[code='xml'][/code]
This is a good title because it describes what the page is about and has the website’s name after that. It is also concise and less than 64 characters. An example of what I would call a bad title is this:
[code='xml'][/code]
This is a bad title because it is messy and not very useful to what the page is about since “Introduction to Widgets” in likely to be cut-off by browsers and search engines.
Adding Keywords and Descriptions
Keywords and Descriptions are sometimes used by search engines to either display in search results or assist in categorizing the result. Although these are not required (and search engines won’t penalize you if you don’t have them), they are generally recommended. Both of these utilize the meta tag. Here’s how to do them:
[code='xml']
[/code]
Your webpage’s description should go within the content attribute on the meta tag that has the name attribute of description. Your keywords should be separated by commas in the content attribute of the meta tag with the name attribute of keywords. You should have a nice, concise description and not too many keywords.
Adding a “Favicon” to your Document
Since favicons have already been described here, I’ll just go over the correct XHTML syntax:
[code='xml'] [/code]
Adding External Stylesheets
Although we haven’t gotten into CSS yet, it’s still useful to know how to add an external stylesheet to a page:
[code='xml'] [/code]
Basically, that tells the browser to include the CSS stylesheet “style.css” from the domain root.
Adding External Scripts
Again, we haven’t dived into Javascript yet, but knowledge is power!
[code='xml'][/code]
Which tells the browser to include the Javascript file “script.js” from the domain root.
In closing
That’s various different tags that you can add to your document head, and a few common uses for them. We won’t get further into script and style tags until we reach that portion of the series.
Tony Chung
January 13, 2009 9:12 pm
Also worth mentioning is that there are specifications for HTML elements that won’t break validation. I saw a site recently that specified page keywords inside the meta name=â€robots†tag in their head. HTML parsers would assume the developer was listing the names of different robots. However, it won’t do anything to add value to their site, their SEO, or anything.
Valuable references I use all the time:
Sitepoint HTML reference
Sitepoint CSS reference
PHP Online manual
Yeah, I’m revealing my trade secrets… but if your readers would rather I research this material instead of them, I’ll gladly consider any contract offers!