by Larisa Thomason,
Senior Web Analyst,
When you're trying to create effective page content that will appeal to both human visitors and search engine spiders, you need to get the most out of every page element. One way to do this is to use ALT and TITLE attributes wherever you can. They increase your site's usability level and promotion possibilities if you clearly understand where to put them, when to use them, and why.
Understand Their Purpose
The ALT attribute is designed to be an alternative text description for images. ALT text displays before the image is loaded (if it's loaded at all) in the major browsers and instead of the image in text-based browsers like Lynx. ALT is a required element for images and can only be used for image tags because its specific purpose is to describe images.
In contrast, you can use the TITLE attribute for just about any page element, but it isn't required for any page element. Use it to describe links, tables, individual table rows, and other structural HTML elements. They're more versatile than the ALT attribute and many search engine ranking algorithms read the text in TITLE attributes as regular page content.
Consider the benefits of good ALT and TITLE text:
- Enhance the browsing experience of visitors with disabilities.
- Increase your page's keyword density score and relevancy for your targeted keywords. (Calculate your page's keyword density with Page Primer and find out if you've used your keywords too little - or too often.)
- Provide valuable information to all your visitors with descriptive link titles and descriptive text about other page elements.
Multiple Benefits From One Addition
ALT and TITLE attributes are simple to add to your code. And remember that ALT is required for images: HTML Toolbox will alert you if your images don't have ALT text descriptions.
Not sure how to add an ALT or TITLE to your HTML tags? Try these examples:
<img src="cafeteria.jpg" height="200" width="200" alt="UAHC campers enjoy a meal in the camp cafeteria">
<table width="100" border="2" title="Henry Jacobs Camp summer 2003 schedule">
<a href="page1.html" title="HS Jacobs - a UAHC camp in Utica, MS">Henry S. Jacobs Camp</a>>
<form name="application" title="Henry Jacobs camper application" method=" " action=" ">
Note that in each example, we used either the ALT or TITLE attribute to provide more information about the page element. ALT describes the image (a photo of the camp cafeteria) and the TITLE information in the table, link, and form describe the purpose of the element while using targeted keywords like UAHC camp and Henry Jacobs Camp.
Used this way, ALT and TITLE do double-duty and boost both your promotion efforts and your site's accessibility. Search engine spiders love the keywords. Visitors with images turned off or who use text browsers, screen readers and other assistive technologies will appreciate your effort to orient them on your Web page and explain the purpose of elements like tables, forms, and links.
How Browsers Display Them
In the past, some webmasters have used the ALT text description as a sort of pop-up tooltip on images, to add funny captions to family photos, or advertise a sale on certain products. That was because the TITLE attribute wasn't widely supported. It is now and Netscape 6.x browsers interpret the W3C specifications rather strictly - ALT text no longer "pops up" when you run your mouse over an image. You have to use a TITLE attribute for that.
That isn't the case with other browsers. Here's what to expect from both attributes when you roll your mouse over page elements:
|Explorer 5.x and up
||TITLE attribute displays on mouseover. Displays ALT attribute for images if image doesn't load.
||Displays correctly for all other page elements.
||Displays ALT attribute for images on mouseover. Ignores TITLE attribute.
||Ignores TITLE attribute on all page elements.
|Netscape 6.x and up
||TITLE attribute displays on mouseover. ALT only displays if the image fails to load or images are turned off.
||Displays TITLE for all page elements.
||TITLE attribute displays on mouseover. Displays ALT text if images turned off or not loaded.
||TITLE text displays both as a pop-up tooltip and in the browser's status bar.
Be careful not to make your ALT and TITLE text too long because all Netscape browsers display it on one line. If you try to stuff several sentences of text into a single attribute, your Netscape visitors may only be able to read a portion of it.
Few coding techniques give you so many benefits for so little effort.