XHTML img with alt and title

[dthomsen8]

I have been working on a non-profit web site, but using someone else's basic design as a start. That design includes both an alt and a title parameter for images. I was unsure just what the title parameter would do for me, so I sought out the W3C reference. (http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.3)

Here is an example of the XHTML code, used in a menu:

<a href="/default.htm"><img src="images/Image9.gif" width="120" height="18" alt="[Contact]" title="Contact" />

[iamback]

The alt attribute is an alternative for the image itself, used when the image isn't shown, not shown yet, or cannot be shown.

A title attribute is intended for providing extra information about something - when applied to an image that extra information can be shown whether or not the image itself is shown. Most browsers make the title attribute available somehow, for instance as a tooltip, or as text in the status bar; some browsers provide the choice as a configuration option.

All that said, the link image probably does not need any extra information (unless your main aim is to show an image that's interesting in itself, but happens to link to an album page or something). Instead, it is often useful to provide extra information about the target of a link and its function (what can the visitor expect at the end of the link? why should she go there?), so the title attribute should go to the link (a element) instead of the image; to make it truly extra information, it also should not just repeat the text of the alt attribute - you can be a bit more wordy and for instance write "Contact us for further information about our widgets".

Your code would then look like this:
<a href="/contact.html" title="Contact us for further information about our widgets"><img src="images/Image9.gif" width="120" height="18" alt="[Contact]" /></a>
Inspect that code carefully for some other small but relevant changes. ;)