HTML Tip:
Using ALT And TITLE Attributes

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

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:

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:

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.