Image alt and title attributes: how do they work and what are their uses

Last updated on December 31, 2011. Tags: , , ,

The alt and title are two attributes of the image tag <img> that contain readable text. The alt attribute is used to display text that serves as placeholder of an image that fails to load. The title attribute, on the other hand, contains the "tooltip"1, the texts that appears whenever the mouse pointer hovers above an image.

These attributes can be used in search engine optimization because search engine spiders can read and index them. However, these attributes do not work in the same way across different browsers.

The alt and title are contained within the image tag in the manner shown below:

<img src="image1.jpg" alt="This is the alt text." title="This title text."/>

Now let's see how these attributes actually work.

Firefox vs Internet Explorer

In Mozilla Firefox, the alt and title attributes work as explained earlier. The alt text serves as placeholder, while the title text appears when the mouse pointer hovers on the image. If there is no title text, then there is no tooltip. If there is no alt text, then there is no text to serve as a placeholder in case an image fails to load (possibly caused by sudden disconnection from the internet or the images being disabled in the browser setting).

The alt and title attributes work in the same way in Internet Explorer (IE) as in Firefox, but only if both attributes are present. If there is no title text, Internet Explorer uses the alt text as both the placeholder and the tooltip.

This text should appear if the image fails to load.Try to open this page in IE and in Firefox. You will notice that in Firefox, the image on the right has no tooltip. However, in IE, there is a tooltip stating, "This text should appear if the image fails to load." This text is the alt text but it behaves like title text in IE because the image has no title text.

Now you might ask, "What if I want the alt attribute to behave in the same way in both Internet Explorer and Firefox?" As stated earlier, the title and the alt attribute works in the same way in IE and in Firefox if and only if they are both present. Hence, the solution is to provide the image with both title text and alt text.

This text should appear if the image fails to load.In this image, the title text and the alt text are both present. Whether you are using IE or Firefox, the tooltip is always "This text should appear when the mouse pointer hovers." The only way you can see the alt text is when the image fails to load, or if you saved a copy of this page as "Web Page, HTML only."

Now, what if you want an alt text but you do not want any tooltip in either IE or Firefox. The solution is to put a title attribute that does not contain anything as shown below.

<img src="image1.jpg" alt="This is the alt text." title=""/>

Note that there should be no character space between the quotes in the title attribute. You may test what would happen if there is a character space between the quotes. It's a small thing, but it is still not pretty.

If you place title text only but no alt text, that text will still appear as a tooltip. However, alt text is very important for visually impaired users and it also helps those users who turned-off images on their browsers for a variety of reasons (e.g., slow internet connection).

Moreover, the use of alt text is mandated by W3C (to support visually impaired internet users stated earlier); if any of the images in your page contains no alt text, that would cause your page to fail the validation. Title text, on the other hand, is entirely optional.

Addendum (3/14/2009): Safari and Chrome

Alt text and title text behaves in Apple Safari and Google Chrome in the same way as in Firefox. Meaning, The alt text appears only when the image fails to load and title text acts as a tooltip. The alt text never acts like a tooltip with or without the title text.

Use in Search Engine Optimization

The alt and title attributes are readable to search engine spiders just like any text readable to humans through their browsers. Hence, if some of the words or phrases contained in the title and alt attributes are searched using any search engine, the webpage containing the image with those attributes is definitely one of the results (unless the page is not yet indexed by the search engine or the page is banned by the search engine).

Moreover, the alt text also serves as anchor text if you use an image as a link. Meaning, if somebody's website links to your site using an image in which the alt text is the phrase "blue tomatoes" (or any phrase for that matter), your website will appear in the search results when the phrase "blue tomatoes" was searched even if that phrase is nowhere to be found in your website. It is as if the link used is text rather than image

This is also very useful in internal linking in case you are one of those designers who are fond of using images in the navigation menu.

Whether or not pure text links provide stronger "vote" in the search engines' algorithm than image links with alt text is a subject of debate among web developers.

However, I must stress that filling-up the title and alt attribute with keywords (a.k.a. keyword stuffing) is not a good idea. First, search engines can detect stuffed keywords, which seem to be out of order. Second, visually impaired users will have horrible experience waiting for their screen readers to read that long string of texts contained in the alt attribute.

Here's my advice on using the title and alt attribute. The alt attribute should be a short description of the image and title tag should be some sort of short caption. Note the difference between the two; alt merely describes the image as is, while the title, as a caption, explains the image in relation to a thought or idea explained in the webpage.

For example, with our images above, we can have alt text as "Dragon turtle figurine with a red ribbon in its mouth" while the title can be something like "Place a red ribbon in the mouth of the dragon turtle to shift your luck to lovelife".

The title and alt attributes are very useful and it is highly advisable to include them to every image whenever possible. They are additional avenues for search engine optimization, they help users with disabilities, and if both were included, ensures that they will behave in the same manner in both Internet Explorer and Firefox.

Footnote:

  1. I read somewhere that the text that appears whenever the mouse pointer hovers on an image is called "tooltip", but I don't think it is an official term. I used it only to make the flow of the discussion easier.

Posted by Greten on November 14, 2008 under Hypertext Mark-up Language, Search Engine Optimization

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • StumbleUpon
  • Technorati

Related Posts

You might also be interested (randomly generated):

Post Comments





Comment Rules and Reminders

  • The links to the commentator's e-mail do not have nofollow tag. However, I will be very strict in approving comments.
  • When you comment, please say something that indicates that you indeed read my post. If your comment is a general statement that can fit to any blog post about any topic, it will be regarded as spam.
  • What you write in the name field may include keywords to your website provided that (1) it's only up to four words long and (2) at least one of these four words is your first name or nickname. I rather reply to Bob or to Joe Smith than to Online Marketing Tips.
  • Please double check your comment before clicking the "Post" button. Once you clicked it, there will be no way for you to edit your comment.
  • Fields marked with asterisks (*) are required. Your email will never be displayed in public.