Using ALT And TITLE Attributes

E

entrepreneur

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.
 
D

dorayme

"entrepreneur said:
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.

You wrote a little essay. Fine by me. About the above. You need
to distinguish clearly between at least two possibilities for the
alt text.

(1) It is instead of the image

(2) It is a description of the image

It is easy to see how these seemingly quite distinct meanings can
be confused. Sometimes some alt text can be both, sometimes not.
Discuss this in your essay.
 
D

dorayme

"entrepreneur said:
<table width="100" border="2" title="Henry Jacobs Camp summer 2003
schedule">

Also discuss in your essay "summary" v. "title" for tables
 
J

Jonathan N. Little

entrepreneur said:
<img src="cafeteria.jpg" height="200" width="200" alt="UAHC campers
enjoy a meal in the camp cafeteria">

<img src="cafeteria.jpg" height="200" width="200" alt="The Cafeteria"
title="UAHC campers enjoy a meal in the camp cafeteria">
 
H

Harlan Messinger

entrepreneur said:
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.

And because of the elements that embed external content in a document,
only the IMG element is empty, making it necessary to use an attribute
to specify alternate text. Other such elements, like OBJECT and IFRAME,
the tag's content (excluding PARAM elements in the case of an OBJECT) is
the alternative text.

<img alt="alternative text" src=...>
<object ...>
<p>Alternative text or <em>HTML</em> goes here.</p>
</object>
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

dorayme wrote :
Also discuss in your essay "summary" v. "title" for tables


This has been addressed once by WCAG. Summary should be preferred to
title for tables.

"title should not be used [..] For table"
http://www.w3.org/TR/2005/WD-WCAG20-HTML-TECHS-20050630/#title-att

and

"An optional method is to use the title attribute on the table element,
but the summary attribute is preferred because of the semantics of the
attribute."
http://www.w3.org/TR/2005/WD-WCAG20-HTML-TECHS-20050630/#datatables_summary


Gérard
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

entrepreneur wrote :
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,

I personally do not recommend the use of title attribute for table and
for said:
but it isn't required for any page element. Use it to describe
links, tables, individual table rows, and other structural HTML
elements.

Using title to describe the nature and target of links is good: in fact,
it's even a recommendation in WAI and by Jakob Nielsen.

http://www.gtalbot.org/BugzillaSection/Bug195867GDR_WindowOpen.html#UsabilityIssues

http://developer.mozilla.org/en/docs/DOM:window.open#Usability_issues

"Always identify links which will create (or will re-use) a new,
secondary window in a way that helps navigation for users (...)"

"Use link titles to provide users with a preview of where each link will
take them, before they have clicked on it."
quote from Ten Good Deeds in Web Design, Jakob Nielsen, October 1999
http://www.useit.com/alertbox/991003.html

Using Link Titles to Help Users Predict Where They Are Going,
Jakob Nielsen, January 1998
http://www.useit.com/alertbox/980111.html

To use title attribute to describe structural HTML element is over-doing
things for no obvious benefit. I don't see what a web author could be
accomplishing with

<h3 title="Secondary section"> ... </h3>

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">

That cafetaria example is good and correct. You may want to read what I
wrote to David Massy on alt versus title implementation in IE (search
for Browser Behavior, Alt attributes) on this page:

Internet Explorer Programming Bugs
Browser Behavior, Alt attributes
"(...) MSIE 5+ handles wrongly the alt attribute for image(...)"
http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerProgrammingBugs

<table width="100" border="2" title="Henry Jacobs Camp summer 2003
schedule">

This is not best; summary should be used instead of title. See my post
in this thread to dorayme.
<a href="page1.html" title="HS Jacobs - a UAHC camp in Utica, MS">Henry
S. Jacobs Camp</a>>

No,.. I would do rather:

<a href="page1.html">Henry S. Jacobs Camp - a UAHC camp in Utica, MS -</a>

Title in links should be only to indicate the nature of the target or
the link (WAI).
<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.

This is debatable. One could do also

<form name="CamperApplication" method=" " action=" ">
<fieldset><legend>Henry Jacobs camper subscription</legend>
....
<fieldset>
</form>

and no one would have to hover the mouse over the form to know what this
application is about. There is such a thing as over-tooltipping a
webpage, visual polluting or clogging the visual rendering with tooltips
popping up all the time whenever or wherever the mouse is.

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.

The problem is, and it's a major problem, that MSIE 5+ will not comply
with your explanation in the above paragraph. They are aware of their
own spec violation on how IE handles tooltip and alt attribute. See

Internet Explorer Programming Bugs
Browser Behavior, Alt attributes
"(...) MSIE 5+ handles wrongly the alt attribute for image(...)"
http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerProgrammingBugs

Gérard
 
J

Jukka K. Korpela

Scripsit entrepreneur:
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.

Nope. That's a wrong approach. The right way to start is from the textual
content and adequate markup for it.

Various tricks that people try might be effective in some search engines for
some time. Most tricks aren't. Those that are may soon become ineffective as
search engines "learn" to deal with various forms of cheating, or operations
that they interpret as cheating. Many tricks actually fire back sooner than
people expect.
One way to do this is to use ALT and
TITLE attributes wherever you can.

Nonsense. You need to use ALT attributes where they are required - for their
defined purpose, not for boosting up your site in search engines. The TITLE
attribute is mostly just pointless but easily becomes harmful, since you
start relying on it and make your _content_ defective.
Understand Their Purpose

The ALT attribute is designed to be an alternative text description
for images.

So you don't understand even the basics of ALT, yet you consider yourself as
competent to teach others to use it.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,995
Messages
2,570,228
Members
46,818
Latest member
SapanaCarpetStudio

Latest Threads

Top