The Difference Between the Alt Attribute and Title Attribute
For a while now, many webmasters have been confused with the difference between the ‘alt attribute’ and ‘title attribute’. These two terms have also been incorrectly referred to as the ‘alt tag’ and ‘title tag’ by many. From this point forward, hopefully readers will refer to these attributes by their proper name and understand the correct ways of using them.
The most common misconception about the alt attribute is when people use them to insert a description about a particular image. The alt attribute should be used as it was originally designed to be used - in place of an image which cannot be displayed. Therefore, people with slower bandwidth computers, hand held devices, screen readers (for those who are visually impaired), can appreciate the image that the website is trying to display. For example, you have an image of a magnifying glass on your website. When a user clicks on this image/link a search function is then enabled. A good use of an alt attribute would be to insert alt=”search” in your code.
The alt attribute is mandatory for images according to HTML 4.01 guidelines. If an image’s purpose is solely for ’eye candy’, than you don’t need to include alt attributes such as alt=”spacer”. This serves no purpose to people using screen readers, and can actually get quite annoying. Instead, simply include an empty alt attribute: alt=”", with no spaces in between the quotations.
The title attribute is where you can include a description of the image / link. Back to the magnifying glass example - if your alt=”search”, your title=”search the entire website” as an example. When creating your alt attributes and title attributes, keep in mind what they were actually designed to do.
In Internet Explorer (IE), you will see the alt attribute appearing as a tool tip. IE’s error has undoubtedly caused a lot of confusion in the online world. This is simply a bug, that I assume will be fixed in the near future. If you wish to prevent the alt attribute from displaying as a tool tip in IE, simply add an empty title attribute: title=”". If you wish to show your readers a tool tip, this is through the use of the title attribute.
Knowing how to use alt and title attributes properly can give you an edge in your SEO campaign. Especially in regards to the alt attribute - it has become known that Google does cache this text and perhaps may even use the alt attribute as the heading for images in Google Images. Therefore, proper uses of the alt tag throughout your site is known to improve search engine optimization efforts. Misuse of the alt attribute, such as spamming (keyword stuffing) can get your website penalized by the major search engines or perhaps even removed. As a rule of thumb, make your alt attributes no longer than 100 characters. The title attribute can be longer than the alt attribute (which is quite normal). However, keep in mind that certain browsers such as Mozilla, only display the first 60 characters of the title attribute.
