From the Top: The Title Element

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.