Don’t Neglect the title Attribute

If it is one thing that I find myself forgetting when initially marking up a document, it is to make effective use of the title attribute in anchors. I think the title attribute is one of those things that gets pushed aside due to the fact that it is seen as tedious by some. I also feel that a good number of developers may not realize the impact it may have on a variety of things relating to your document. Not only will it help with the usability and accessibility of your document, but also give your search engine optimization a good boost.

Some Background Information

The title is pretty straightforward and is defined by the W3C as offering advisory information about the element for which it is set. Essentially what results after using this attribute is a ‘tooltip’ appearing over an anchor element if it is hovered by the users mouse for a long enough time. This tooltip should provide insight as to where the anchor will take the user when he or she clicks it. Something to keep in mind is that Mozilla based browsers will display only the first 60 characters (more or less) of your title so it is important to be concise. Personally I have had the range of characters displayed reach around 73, depending on the total length. While a title should not ever really reach that length and maintain its effect, it is something to keep in mind.

The Purpose of title

To put it simply, the purpose of using title in your anchors is to provide the user with additional information regarding any particular link. The title attribute is not limited to anchors, but to me using it for links is most effective. This is not the only useful feature of title, however.

SEO and title

Many developers are always looking for ways in which to boost the search engine optimization (SEO) of their documents. Clients know about SEO and they want it. Using title can greatly help with your SEO. It provides developers another place to effectively insert targeted keywords and descriptive text helping to increase the value of their document. It is important not to abuse the title attribute, however. While you can effectively boost your SEO by having many instances of keyword appearance, duplicate content can work against you. The important thing to do is properly use title and use it effectively.

The Usability of title

Using this attribute can generally boost the usability of your document in that there should be no questions as to where a link would direct a user. One issue to take into consideration is the fact that many people do not think to leave the mouse hovering over a link long enough for the tooltip to appear using a visual browser. Regardless of this fact, title should be put to use as much as possible to help out those users that do use the feature. I think it is most useful when considering lists of links, where the surrounding content doesn’t give as much of a clue as to where the link will take me. When a link is placed inline within a paragraph of text, the context in which it is used is generally more useful than a tooltip and I know where the link will be guiding me, for the most part.

Styling your titles

Some developers have seen the usefulness of title and taken it a bit further by attempting to make them even more useful through the implementation of JavaScript and CSS to control their display. Namely Dustin Diaz and his Sweet Titles and Stuart Langridge’s Nice Titles.

While I am not a big fan of non-essential JavaScript implementation, some interesting things have been done with both Sweet Titles and the revision of Nice Titles. Both of these examples take title to a new level by giving extra information such as including the target URL or accesskey associated with the title visually. The only fault I see to this extra information is why displaying the accesskey would be effective if my mouse were already hovering the link and only require the press of a button to activate. Using these examples is up to the developer if they would like to add that extra visual element to their document. Personally, I have been scarred from using such techniques, something you can read about in the following paragraphs.

When title Goes Bad

It is safe to say that every technique or style ever developed using (X)HTML, CSS, or JavaScript has been abused. Techniques such as Sweet Titles are no exception. Take for consideration, the following image:

We have all seen these ads before, there is no doubt about it. We also know that their implementation has made certain sites an absolute annoyance to use. While technically a title is not what is being displayed here, the developers of this “technique” have used title as inspiration. It is this situation which has deterred me from using any sort of thing such as Sweet Titles because it gives me the sensation that my browsing experience is invaded and I’m afraid to touch any link.

I know this isn’t true, because Dustin has taken the time to insert a pause before the actual Sweet Title is displayed. He also accounted for making the title become invisible again when the mouse leaves the link, unlike many of these invasive ad campaigns. I think, however, I will stick to the default display of title according to user agent.

Closing Thoughts

The take home message is to do your best to effectively make proper use of title. It is something I have the unfortunate habit of overlooking. I’m going to spend time forcing myself to remember to use this attribute mostly because of the positive usability and SEO side effects.