Don’t Neglect the title Attribute

Posted: April 10, 2006 Comments(13)

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:

Image of invasive title

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.

Get my newsletter

Receive periodic updates right in the mail!
  • This field is for validation purposes and should be left unchanged.

Comments

  1. god i really hate those ads. i thought this was a really interesting article, and has inpired me to start implementing the title attribute into my projects.

  2. Those ads are really annoying. They still get me thinking they are relevant content as I always like to hover over links.

    The title attribute is indeed a great way to supply additional information to the end user. Great Article.

  3. Nice article – titles are definitely an underated tag. SEO is such an important facet of web development – one I seem to ignore at times. Considering about 10% of my traffic is through search engines, I should pay more attention to it.

  4. I use Opera as web browser and it always displays the target URL when hovering over a link. Nice feature!

  5. I’d have to agree — those ads are basically popups and are just as annoying in my opinion.

    @P.J.: Yeah, SEO is where it’s at. If Joe Public is paying you for a site, there is a good chance he has heard of SEO and the more knowledge a developer has of it, the better of they’ll be.

    @Robert: You bring up an excellent point. Browser vendors are able to have control over what is displayed as a result of a title tag. I think it’s great that Opera shows the URL by default.

    Do you (Robert and anyone else) think that browsers should standardize what is shown as a result of title?

  6. Great reminder concerning the title attribute. I admit I’m guilty of neglecting to take the time to add them into my markup for the very reason you mentioned… laziness. It’s something that I’m going to have to make a conscious effort to remember from now on. Title attributes are definitely a great way of informing the reader of what lies behind the mouse-click.

    On the topic of popup “title” ads, I despise those like fruitcake during the holidays. I’ve actually made an effort to delete pages from my bookmarks that made use of those annoying ads. I would rather get a popup window on the side rather than a popup ad on hover.

  7. I will admit that over time, I have exhausted Sweet Titles to a point where I’m tired of looking at them on my own site. They most definitely can aid some usability in certain areas, but I too am still a fan of the default display of title attribute. It’s really not so bad if they just get it right. I get quite annoyed when the browsers decide to cut it off after {n} number of characters though.

  8. The issue I have with title tags is actually pointed at Firefox, a browser that I’m usually quite fond of. But for some reason, they limit the number of characters in the title tag to 85 characters. If you go over this number, the remaining text is cut off. Why?

    If the point of the title tag is to provide more information about the link, why are they dictating the limit to this, when JavaScript-based tooltip scripts do not? To my knowledge, there is no W3C rule stating that 85 should be the limit. No, this is an arbitrarily-based Firefox rule.

  9. When you say not to abuse the title tag, what exactly is considered abuse? I have been hesitant to add it to my web pages because the big keywords I have been searching for on google (links listed on the top 10) utilize the title attribute. I am wondering if Google is penalizing websites that use it, yet have not seen any articles being posted saying this is the case.

  10. […] Bad Example: Please click Here to learn about EQQY Bakery Good Example: I would like to learn more about EQQY Bakery An Example for a ‘nofollow’ Anchor Tag: <a href=”http://eqqyBakery.com&#8221; rel=”nofollow”>EQQY Bakery</a> An Example for a ‘title’ attribute: <a href=”http://eqqyBakery.com&#8221; title=”EQQY Bakery”></a> For more information about ‘title’ tag: Don’t neglect the Title Attribute […]

Leave a Reply

Your email address will not be published. Required fields are marked *