Should You Use Alt or Title Attribute to Describe Images

Wow – I didn’t know that. I usually only use the “alt” tag, but recently have been using both the alt and the title tag — now I know the “rules” and will only the title tag for LINKED images.

Thanks!

I didn’t know that too. Thanks a lot.

I think the best practice is to use the ALT attribute for all IMG tags. The TITLE attribute should only be applied to links (A tags), not directly to the IMG tag itself. That way, all links have a title, whether they encapsulate images or text, and all images have alternative text.

The main idea is that “alternate” text is visible when media is unavailable (Or for search engines) and “title” text comes as a tooltip.

Infact, you can use title even with other tags. It can help add special notes or personalize your content.

For ex, my post link has loads of title attributes used everywhere, just to make the post a bit fun to read :D (Hold mouse on random parts of text to check it out!)

Keep posting more tips!

Very informative Amit.Thanks for the article.

An IMG tag, in my opinion, does not need a title tag, ever. This is because the IMG will be wrapped in A tags, which should include a title always.

Amit, you give us an SEO advice, but it’s absolutely not an accessibility advice as some might thought. TITLE attribute should be put on the A tag, not the IMG tag, because it’s made to describe the action (e.g. “open this image in full size”), not to describe the pic.
BTW, according to XHTML 1.0 DTD, ALT attribute is “required” for IMG tag, TITLE is just “implied”.

title attribute should go inside anchor tag & alt attribute should go inside img tag only.

Refer: W3C Standards.
link

I usually add both tags and what can you tell me what is the problem in that..? Okay you add alt for non-linked images, but having a title tag for that will be a bonus,right..?

By the way, your case A is spelled Case B there, we have no case A.

Thanks

This is really a good tip .. thanx for solving our confusions…

On a linked image its best to leave the link tag without title and add title and alt to the image tag.

If you put title on the link tag and alt on image tag IE will use the alt tag when you mouse over.

IE is a bit dumb because the alt attribute should only be displayed during image loading, failure to load and text only browsers.

There seems to be some disagreement on where the title tag should go, and unfortunately this article is incorrect. Title tags ONLY belong inside <a> tags, never inside tages, period. “title” isn’t even a valid attribute. link

While I appeciate this as a fine article written about ALT attributes of the [IMG] tags (and topping on Google when one makes relavent searches), due all respect my friend, I still find it ‘inadequate’ to call this as a dependable source of information as Google might be suggesting to show here in the first place. With this personal entry of mine, I aim to be of assistance on this matter.

As I also have understood from the hereposted user comments, it is still badly confused that a TITLE attribute might be eligible for the anchor links (only) while the ALT attributes would be suitable for [IMG] tags.

The truth lies in Web Content Accessibility Guidelines and the specific section on alternate content of W3C. There it says TITLE is a global attribute which could be attached on every elements as tooltips to both author and document users where applicable, while the ALT attribute remains unnique for [IMG] tags and needed for the improved semantics with textual subsitution of images.

The Mozilla group thinks that, authors today misuse the ALT attributes for displaying tooltips rather than substituting their associated images with the textual counterparts, and as a cautionary attempt, they don’t let them appear on their browsers (with mouseovers) unlike they do that for the titles. This, then, brings about the problem when people started to use both of them at the same time for purposes of a mere “tooltip display” disregarding our standards and the accessibility guidelines.

My suggestion regarding to your example would be assigning a TITLE attribute to anchor link with the [TITLE] tag of the linked destination, and a proper ALT value to the [IMG] tag which says something like ‘yummy burgers at McDonald’s’.

They would appear, or suppress each other, or both don’t display at all, is not part of our problems. If someone badly needs a tooltip, then try a TITLE attribute on the preceding BLOCK level element, which is the [P] tag at this instance.

best regards;