473,763 Members | 1,356 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

What is the different between "title" and "alt" for html tag "img"?

Hi all,
It is a newbie's question about html tag "img".
The attributes "title" and "alt" for "img" seems having the same
function. So what is the main difference between them?
Can i use them at the same time and set different values?

Thank you for suggestions!
Jul 23 '05 #1
8 10650
Quoth the raven Lian:
Hi all,
It is a newbie's question about html tag "img".
The attributes "title" and "alt" for "img" seems having the same
function. So what is the main difference between them?
The alt attribute is an 'alternative' to the image, and is what the
browser shows if images are turned off, or the visitor is using a text
browser. One popular operating system component masquerading as a
browser also displays the alt text as a "tooltip" if hovered (and if
there is no title attribute).

The title attribute is generally for additional descriptive text to go
along with the image. This is where you place text you want to display
in the "tooltip".
Can i use them at the same time and set different values?


By all means.

--
-bts
-This space intentionally left blank.
Jul 23 '05 #2
In comp.infosystem s.www.authoring.html Lian said:

It is a newbie's question about html tag "img". The attributes "title"
and "alt" for "img" seems having the same function. So what is the
main difference between them?


alt = text [CS]
For user agents that cannot display images, forms, or applets, this
attribute specifies alternate text. The language of the alternate text
is specified by the lang attribute.
http://www.w3.org/TR/html401/struct/....html#adef-alt

title = text [CS]
This attribute offers advisory information about the element for which
it is set.
[...]
Values of the title attribute may be rendered by user agents in a
variety of ways. For instance, visual browsers frequently display the
title as a "tool tip" (a short message that appears when the pointing
device pauses over an object). Audio user agents may speak the title
information in a similar context. For example, setting the attribute on
a link allows user agents (visual and non-visual) to tell users about
the nature of the linked resource:
http://www.w3.org/TR/html401/struct/...tml#adef-title
Web Content Accessibility Guidelines 1.0
Checkpoints: 1.1 Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content). This includes:
images, graphical representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and programmatic
objects, ascii art, frames, scripts, images used as list bullets,
spacers, graphical buttons, sounds (played with or without user
interaction), stand-alone audio files, audio tracks of video, and video.
[Priority 1]
http://www.w3.org/TR/WCAG10/wai-page...ext-equivalent

Use of ALT texts in IMGs
http://ppewww.ph.gla.ac.uk/~flavell/alt/alt-text.html

The "tooltip" effect and the title attribute
http://www.cs.tut.fi/~jkorpela/html/alt.html#tooltip
--

v o i c e s o f t h e l i t t l e
Jul 23 '05 #3
On Fri, 29 Oct 2004 11:39:53 +0800, Lian <da**@dfaf.co m> wrote:
The attributes "title" and "alt" for "img" seems having the same
function. So what is the main difference between them?
In theory, (as others have posted) the difference is that one's an
annotation to an image (title) and the other (alt) is an alternative
for when the image isn't shown.

In practice, the difference depends on browser variations between IE
and FireFox.

IE 4 (4 ?) started to show the alt text as a floating tooltip. It
wasn't _wrong_ to do this, although a better implementation would have
used the new title attribute. The feature was popular and it probably
encouraged use of alt attributes when they'd have been ignored
entirely if it were just for their real purpose.

The recently popular Firefox though takes a different approach. This
is no more "correct", as the HTML spec is generous. Firefox _only_
uses the title attribute to display a tooltip, even when there's an
alt but no title. Obviously the best behaviour for both browsers would
have been to use title correctly in the first place, and (debatably)
to use alt instead if that was the only one available.

So if you carry on authoring according to last year's impression of
"best practice" (using alt religiously and ignoring title) then
you're now going to get a surprise from Firefox -- your tooltips
disappear.

So if you want tooltips for both IE and Firefox, you have to put them
in twice.
Can i use them at the same time and set different values?


Yes. This is good practice, although tedious. Set both though, even
if they're just the same because you don't have time to do the
copywriting to make them different,

There _may_ be a page reader out there that responds clumsily to
simultaneous use. If they're both used together than a user agent
(speech or visual) shouldn't ever render both attributes
simultaneously, just because they were both supplied. I don't know
much about readers, but I'd appreciate feedback if anyone knows of
one?

--
Smert' spamionam
Jul 23 '05 #4
Andy Dingley wrote:
IE 4 (4 ?) started to show the alt text as a floating tooltip. It
wasn't _wrong_ to do this, although a better implementation would
have used the new title attribute. The feature was popular and it
probably encouraged use of alt attributes when they'd have been
ignored entirely if it were just for their real purpose.


Unfortunately, IE's behavior tended to encourage abuse of the alt
attribute. It probably would have been better if MS had not implemented
alt as tooltip. And if they had implemented title as tooltip, all the
better, since authors would have flocked to title, using it for its
intended purpose instead of abusing alt. After all, alt is an
accessibility issue, while title is merely a means to provide "advisory"
information.

--
Brian (remove "invalid" to email me)
Jul 23 '05 #5
On Sat, 30 Oct 2004, Andy Dingley wrote:
On Fri, 29 Oct 2004 11:39:53 +0800, Lian <da**@dfaf.co m> wrote:
The attributes "title" and "alt" for "img" seems having the same
function.
HTML is markup. The markup is descriptive. It's the browsers which
take that markup and do something with it. That "something" is called
"rendering" . This partitioning of the problem space is an important
feature of the design of HTML, in my opinion, and seems to me to be
missing in the above-quoted remark.

In order to find out what the "title" and "alt" attributes were meant
for, it's no use looking at the behaviour of a few browsers - you need
to look at the specifications (of HTML) and guidelines (e.g web
accessibility content authoring guidelines). You're then in a
position to evaluate how well various browsers implement those
guidelines in their various rendering modes.
In theory, (as others have posted) the difference is that one's an
annotation to an image (title) and the other (alt) is an alternative
for when the image isn't shown.
Agreed.
In practice, the difference depends on browser variations
I'd have to disagree. You're supposed to author documents in
accordance with guidelines, not by targetting at specific browser
variations.
between IE and FireFox.
There *are* other browsers...
IE 4 (4 ?) started to show the alt text as a floating tooltip.
Let's not get bogged down in detail, but I don't think that behaviour
was in any way exclusive to InternetExplode r.
It wasn't _wrong_ to do this,
I know at least one purist who says it /was/ wrong: browsers have no
business displaying -alternative- text while the image is being
presented. That's what -alternative- means, after all: either the
one, or the other. At least not as their default behaviour
(accessibility guidelines *for client agent design* would suggest
making the alternative text an available *user option* in the browser,
for those who feel they want/need it - and we know one who says that
he does).
although a better implementation would have used the new title
attribute.
Indeed.
The feature was popular and it probably encouraged use of alt
attributes when they'd have been ignored entirely if it were just
for their real purpose.
But a very mixed blessing, since some entirely unsuitable alternative
texts were being chosen as a consequence of misinterpreting the role
of this attribute as being supplementary tool-tip information, instead
of mandatory alternative information.

IMNSHO, the presence of an inappropriate alt attribute is often worse
- sometimes significantly worse - than the offence of having none at
all.
The recently popular Firefox though takes a different approach. This
is no more "correct", as the HTML spec is generous.
Hixie has some well-argued reasoning:
http://www.hixie.ch/advocacy/alttext

Not everyone agrees with his conclusions, but I think it's entirely
fair to say that at least he's presented the reasoning in an open and
logical fashion. In fact I find myself in agreement with most of what
he says, and any disagreements I have are fairly specialised.
Firefox _only_ uses the title attribute to display a tooltip, even
when there's an alt but no title.
This is the right thing to do, IMHO.
Obviously the best behaviour for both browsers would
have been to use title correctly in the first place,
Theoretically, yes. Except that, for a long time, authors were
hampered by the wide usage of Netscape 4, which failed to render the
title attribute. However, I think it's fair to say that even authors
who care that their content is still browseable on Netscape4, no
longer consider that browser to be worth further consideration on
subtle details of presentation.
and (debatably) to use alt instead if that was the only one
available.
On this point I think Hixie's conclusion is better. One shouldn't
tempt authors to choose inappropriate -alternative- texts by
presenting them as -tooltips-.
So if you carry on authoring according to last year's impression of
"best practice" (using alt religiously and ignoring title) then
you're now going to get a surprise from Firefox -- your tooltips
disappear.
Rightly so...
So if you want tooltips for both IE and Firefox, you have to put them
in twice.
Eh? Given that we seem to agree that title= is the theoretically
correct place for tooltips, you only have to put them in once, for
quite a range of browsers. This is -not- an alternative to providing
"appropriat e"[1] alternative text, in its proper place: that provision
is made mandatory by the guidelines, but only the context can be
decisive as to whether the chosen -alternative- text was apt.
Can i use them at the same time and set different values?


Yes. This is good practice,


Absolutely.
although tedious.
As "Callie" said to me, many years back now:

Many authors haven't figured out exactly what they are trying to
present; they don't know what it is about the image that's important
to the page's intended audience. The reason you can't figure out why
their alt [texts] aren't working is that they don't know why the
images are there.

Choosing the (mandatory) alternative text -should- be no big deal, in
the majority of cases, for an author who knows what the page is trying
to communicate to the reader: it just needs to become a habit. It's
got almost nothing to do with - in the majority of cases - appropriate
selection of optional "short supplementary text" (to precis the
guidelines), intended to be presented as an optional tooltip etc.
Set both though, even if they're just the same because you don't
have time to do the copywriting to make them different,


I wouldn't choose that as an authoring guideline, frankly.
Occasionally, it might just turn out to be the right answer, but I'd
rather reason my way there, in a particular instance, based on some
well-founded authoring guidelines.

all the best

[1] where "appropriat e" sometimes means alt="" or alt=" "
Jul 23 '05 #6
On Sat, 30 Oct 2004 16:15:13 +0100, Andy Dingley
<di*****@codesm iths.com> declared in
comp.infosystem s.www.authoring.html:
In practice, the difference depends on browser variations between IE
and FireFox.
AFAIK IE is the only ("common") browser that exhibits the behaviour you
mention.
IE 4 (4 ?) started to show the alt text as a floating tooltip. It
wasn't _wrong_ to do this,
I disagree. The fact that alt text is supposed to be an "alternativ e"
implies that the 2 are mutually exclusive. So a UA shouldn't ever render
both at the same time.
although a better implementation would have
used the new title attribute.
Agreed.
The recently popular Firefox though takes a different approach. This
is no more "correct", as the HTML spec is generous.
Again, I disagree. We had a discussion about this recently in (IIRC)
alt.html too, so I don't really feel like going into a lot of detail
here.
Firefox _only_
uses the title attribute to display a tooltip, even when there's an
alt but no title.
As do most other browsers.
So if you want tooltips for both IE and Firefox, you have to put them
in twice.
Not so. If both alt and title are present, IE will display the title
text as the tooltip, not alt. So title is the only one necessary for
tooltips.
Yes. This is good practice, although tedious. Set both though, even
if they're just the same because you don't have time to do the
copywriting to make them different,


Like Alan, I disagree with this too. The alt text is supposed to be an
alternative to the image, the title is supposed to give additional
(non-crucial) information. On some occasions the two _may_ need to be
the same, but this would be very rare.

--
Mark Parnell
http://www.clarkecomputers.com.au
Jul 23 '05 #7
Mark Parnell <we*******@clar kecomputers.com .au> wrote in message news:<d2******* *************** *******@40tude. net>...
AFAIK IE is the only ("common") browser that exhibits the behaviour you
mention.


I believe Netscape 4.x did as well, but it's not really "common" any more.

--
Dan
Jul 23 '05 #8
Mark Parnell wrote:
The alt text is supposed to be an alternative to the image, the title
is supposed to give additional (non-crucial) information. On some
occasions the two _may_ need to be the same, but this would be very
rare.


Perhaps not so rare. An online art gallery might use identical alt and
title attributes for images.

--
Brian (remove "invalid" to email me)
Jul 23 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
3727
by: mike | last post by:
regards: I use Jtidy (api) to translate a HTML file into a "XHTML file". But The "XHTML file" cannot be identified by nokia 6600. Do I miss something important? Or this is Jtidy's weakness or bug? Can someone excellent to tell me the reason. best wishes
1
4819
by: Allen | last post by:
I am trying to add an additional photo/hyperlink to the company web site (I didn't create it) without any luck. The mouseover feature 'highlights' pics by swapping them with another pic using this command in some type of array. I added the mailbox in the lower left corner (see link below)http://www.aamechanical.com/indextemp.htm but I cannot get it to swap. Here is the code for the page: Thanks for your help in advance
8
5744
by: Hostile17 | last post by:
Consider the following HTML. ---------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <title>Untitled</title>
3
9273
by: davidkarlsson74 | last post by:
Error: document.getElementById("folderMenu").cells has no properties File: http://www.volkswagen.se/tillbehor/js/foldermenu.js Rad: 49 The function activates different DIV:s, but doesn't seem to work on FireFox or Netscape. What could be wrong? The function: function setActiveTab(tabNo) {
5
11135
by: garfy | last post by:
Hi i get this error in validation Line 22 column 6: document type does not allow element "title" here. <title>Seo Web Design Los Angeles - Web Design And Search Engine Optimization L But the title is inside the head so why I am getting this?
3
2682
by: eholz1 | last post by:
Hello PHP programmers. I had a brilliant idea on one of my pages that selects some data from my mysql database. I first set the page up to display some info and an image, just one item, with a row of data, etc. then I thought it would be nice to do a select, and perhaps an update (the title of the image) on the same page.
3
8770
by: Eric Layman | last post by:
Hi everyone. An image allows alt attribute. When mouse over images with alt attribute, a small yellow popup would appear besides the mouse cursor. How to replicate this behaviour using a table cell instead? Is this even possible? Thanks.
3
3821
by: rkhurana | last post by:
Hi I am writing a JSF application that uses some third party charts. While I can see the chart but the javascript that is supposed to calla function to update chart periodically has a problem. It reports the error in the console - "document.getElementById("image1") has no properties". Pls advice. thanks rupak <?xml version="1.0" encoding="UTF-8"?> <jsp:root version="1.2" ...> ...
10
8040
by: jasone | last post by:
hi everyone! any advice given will be MUCH appreciated, i have spent about 10 hours on this bit of script... a rating system. I am having realt trouble overcoming this problem at runtime Microsoft VBScript runtime (0x800A01A8) Object required: '' /ddwassignment2/full_catalogue2.asp, line 180 please find the complete code listing below, i have highlighted line 180... if you spot any other errors please let me know! The function...
1
9938
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9822
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8822
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7366
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6642
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5270
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5406
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3917
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2793
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.