Lively discussions on the graphic arts and publishing — in print or on the web

Go Back   Desktop Publishing Forum > General Discussions > Web Design

Thread Tools Display Modes
Old 06-01-2007, 06:35 AM   #1
dthomsen8's Avatar
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default XHTML img with alt and title

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.

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" />
dthomsen8 is offline   Reply With Quote
Old 06-01-2007, 08:44 AM   #2
iamback's Avatar
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894

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:
HTML Code:
<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.

Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
XML/XHTML-to-PDF converter ktinkel Web Site Building & Maintenance 9 01-31-2007 05:37 PM
<title> length? dacoyle Web Design 5 03-21-2006 10:14 PM
Don't Even Know What to Title This... Clayton Print Design 10 02-24-2006 02:09 AM
Font used in title BradW Fonts & Typography 7 02-26-2005 06:54 AM

All times are GMT -8. The time now is 05:35 PM.

Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Contents copyright 2004–2018 Desktop Publishing Forum and its members.