Microsoft released Internet Explorer 7 Beta 2 to the public today. Make sure you read the Preview checklists before you install, test, and evaluate the browser and your sites. Microsoft have provided a checklist for that very purpose.

Every web page must have a title element in the head section. In this, the fifth article in my series “From the Top” we start to describe a web document via elements between the head tags. This article is not a discussion on Search Engine Optimisation (SEO) techniques although the guidelines offered may help (and ethically so) in that regard.

• The Title Element
• Writing an Accessible Title
• Conclusion
• Further Reading

The Title Element

Every web page must have a title element and it may contain two attributes, namely lang and dir. Titles may contain character entities for accented or special characters but not markup or comments. The text appears in the window title of the user agent.

Writing an Accessible Title

Whereas many people don’t read the window title, titles play an important role in bookmarking and finding the website in search engines. When a user bookmarks your website, the window title is used as the default bookmark name. Similarly, search engines will return the window title in search results and use it to determine relevancy with the search term. In order to be effective and useful (both for search engines and people), window titles should convey as much information as possible using the least amount of words.

1. Begin with the information-carrying word. Don’t start with useless words like “Welcome” or articles such as “a” or “the”. I don’t want all my bookmarks starting with the word “The”. Their inclusion makes search results and bookmark collections less scannable.
2. Begin with the subject of the page. This makes it easier to scan multiple windows, tabs or bookmarks and thus present the most important information first.
3. Include the website or company name. Not only is this important for branding or qualifying the subject matter, distinction can be made between different websites talking about the same subject.
4. Don’t include the top-level domain name. Unless this is part of a company name, such as “Amazon.com” it is an unnecessary word to include and creates an artificial distinction between a company’s presence on and off the web.
5. Don’t separate the subject from the company or website name using odd characters that cause screen readers to say out-of-context things. Make sure you read (and listen) to Peter Krantz’ article: The sound of the accessible title tag separator. So long as you haven’t already used the character in the title, In the past I’ve recommended a dash, colon or vertical bar ( | ) as a separator as they seem either to have the least impact or have a widespread understanding or acceptance of their use.
6. Ensure that there is white space on both sides of the separator.
7. Try to keep the length down to seven or eight words and fewer than 64 total characters to ensure they remain scannable and display adequately in user agents. At least get the subject displayed in full.

Conclusion

Use of the title element is required. Start the title with the subject followed by a sensible separator surrounded by white space and then the name of your company or website (minus the top-level domain name). Never leave it as “Untitled document”…

Further Reading

• 456 Berea Street — Document titles and title separators.
• Adrian Holovaty — Page titles on news article pages.
• Jakob Nielsen — Microcontent: How to write headlines, page titles and subject lines.
• Standards, Schmandards — The sound of the accessible title tag separator.

Next in “From the Top”

A double-bill this week, be sure to read the previous article in the series: “The Head Element”. Next week we will take a look at the inclusion of meta elements in the head section of a web page.

The Complete “From the Top” Series

• Document Type Definitions.
• MIME and Content Negotiation.
• Defining Content Language.
• The Head Element.
• The Title Element — this article.
• The Meta Element.
• The Link Element.

Both the start and end tags of the head element are actually optional, user agents will automatically produce these if not present in the code. However, if you are coding with Extensible Hypertext Markup Language (XHTML) you will not pass validation due to an error. For consistency, I always use head tags regardless of the flavour of my markup. In this, the fourth article in my series “From the Top” I will give a quick overview of the head element.

The head element contains information about the document like the title, keywords and other data that is not considered to be document content. User agents don’t generally render the contents of the head element to the viewable window but rather make that content available through other mechanisms. The head element accepts three attributes, namely:

• profile
• lang
• dir

We covered lang and dir last week. The profile attribute takes a Universal Resource Identifier (URI) as its value to specify one or more meta data profiles (separated by white space). User agents use this information in two ways:

1. As a globally unique name. User agents may be able to recognise the name without retrieving the profile and perform some activity based on known conventions for that profile.
2. As a link. User agents may dereference the URI and perform some activity based on the actual definitions within the profile.

If you view the source of this website you will notice that I use profile="http://gmpg.org/xfn/11". This defines a meta data set that is used by the XHTML Friends Network (XFN) to indicate relationship information in links.

That’s pretty much it for the head element. The tags are optional in HTML but not in XHTML. For consistency, I’ve opted to always use it.

Next in “From the Top”

A double-bill this week, be sure to read the fifth article in the series: “The Title Element”. Next week we will take a look at the inclusion of meta elements in the head section of a web page.

The Complete “From the Top” Series

• Document Type Definitions.
• MIME and Content Negotiation.
• Defining Content Language.
• The Head Element — this article.
• The Title Element.
• The Meta Element.
• The Link Element.

You may recall Boo.com, a fashion retailer from the so-called dotcom era that managed to blow £178 million during it’s 6 month life. Well, they will back in June and judging from the simple announcement page it isn’t going to be standards compliant. Start writing now.