Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Positioning tips.
search engine optimization story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Increase traffic.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

HTML Tip:
Using ALT And TITLE Attributes

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

  
January 2003
Vol. 6, No. 1
 • Design Tip
 • JavaScript Tip
 • HTML Tip
  

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:

Browser ALT Attribute TITLE Attribute
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.
Netscape 4.x 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.
Opera 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.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.