Explain 'ALT' and 'TITLE' tags and how do I use them with images and links?

Requested and Answered by Carnuke on 2004/12/19 12:37:19

Explain 'ALT' and 'TITLE' tags and how do I use them with images and links?

If you only want to display text like a tool-tip on hover Using the 'alt' tag as below only works for Internet Explorer.

<img src='images/text.gif' alt='text here.'>
The following example uses 'title' following WC3 recommendations and works for both IE and Mozilla/ Netscape
<img src='images/text.gif' title='text here.'>
The right way to show a tooltip is the title tag. The wrong way is the alt tag. If you use the title tag: 1. It works in all browsers 2. You are in compliance with the W3C 3. Your code will validate If you use the alt tag: 1. It only works in one browser (internet explorer) 2. You are out of compliance with the W3C 3. Your code will validate as having alternate text for images, when you are really using it for something else. To simply display the tooltip all that is needed is the title attribute. Let's say for example that I have a submit button on my form that is a picture of betty boop. The alt tag should be "submit" while the title tag should be "betty boop" or "picture of betty boop" or something similar. All images should have the alt attribute, for XHTML-compliancy. The alt attribute's intended purpose is to provide alternate text to display if the image cannot be displayed. IE happens to use the alt attribute as hover text. Mozilla uses the title attribute as hover text, which is the proper behavior. So while all images should have the alt attribute, only images that need hover text should have a title attribute. to read an in depth discussion about ALT and TITLE tags see This forum thread

This Q&A was found on XOOPS Web Application System : https://xoops.org/modules/smartfaq/faq.php?faqid=314