Website Design Blog - BlueBolt.net

IMG Tag: ALT and TITLE Attributes

Anyone familiar with HTML will have encountered the <img tag many times, which is of course used for inserting images in to pages.

This article will talk about two attributes supported by the <img tag: ALT and TITLE.

There is a subtle, but significant difference between these two attributes, which are commonly misunderstood and so misused. This is, in no small, part due to one irresponsible browser developer interpreting standards in their own way (yes, it’s Microsoft’s Internet Explorer).

You could be forgiven for thinking the ALT and TITLE attributes were functionally identical, if you have only ever developed and tested websites in Internet Explorer.

Let’s start with the ALT attribute…

ALT is short for ‘Alternative [text]‘, and it’s intended purpose is to act as a placeholder for a textual description of the image which is displayed in the event the images is not available (such as a bad link or a remotely located image which gets deleted or moved, etc.).

While Internet Explorer does do this correctly, it also adds another layer of functionality, which is not present in the standards – the mouse-over tool-tip. You will notice that upon leaving the mouse stationary while positioned over an image with a defined ALT attribute, the text will be displayed in a small box next to the pointer, typically with a yellowish background and black border

This is actually the job of the TITLE attribute, and where the confusion between them has arisen.

If you were to try hovering over the same image but using a different [standards compliant] browser – you will probably not see the tool-tip. This is actually the correct behaviour.

Therefore, if you wish to display the tool-tip in all browsers, you must use the TITLE attribute. You can, and should, use both the TITLE and ALT attributes in your <img tag declarations. Search engines, and text readers benefit most from the ALT attribute. It is widely accepted that the ALT attribute helps with SEO, as it allows you to tell search engines what the purpose of your images are (and is particularly effective for optimising image search results.

It is worth noting that since Internet Explorer 8, the ALT attribute is handled properly by the browser and complies with web standards.

So, the ALT attribute should describe the purpose or key idea of the image, whereas the TITLE attribute should be considered more of a caption.

As W3C says, “The generic rule for the content of the alt attribute is: use text that fulfills the same function as the image.”.

An (XHTML) example of a properly formed <img tag with suitable ALT and TITLE attributes:

<img src="/images/my_cat_box.jpg" alt="Cute Cat in Box" title="Here is my cat sleeping in a box. How cute!" />

Here is the same example, but with an inappropriate ALT attribute:

<img src="/images/my_cat_box.jpg" alt="Colour Image of My Tabby Cat in a Cardboard Box in the Kitchen With a Bemused Expression" title="Here is my cat sleeping in a box. How cute!" />

I should also mention that the ALT attribute is not optional, and to meet web standards and create pages which successfully validate, all <img tags demand an alt attribute. However, this does not mean you should add a description for all images. Presentational images, such as backgrounds or template slices should not include a description. In this situation, the ALT attribute should be defined, but left empty.

Here’s an [XHTML] example:

<img src="/images/background.jpg" alt="" />

Descriptions should only be added to ALT attributes for images which are relevant to the content on the page.

The last important point to make is that the TITLE attribute is not solely for the <img tag, unlike the ALT attribute. In fact, the TITLE attribute can be applied to almost every element there is, including: <div>, <span>, <b>, <ul> and many, many, many more.

But do not go over the top. It is unlikely that Google will appreciate you adding captions to your spacer images or every word of text on the page. If anything, it is more likely to work against you.

Use them when they are needed or when you think they will improve the user experience. This way you should never go wrong.

Posted in: (X)HTML, SEO, Web Development, Web Standards
Tags: alt, html, img, seo, standards, title