"Alt" and "Title" Tags by Don Pedro

What are "Alt" Tags / Attributes ?

The "alt" attribute is an alternative for an image, when the image isn't displayed. The "alt" attribute goes inside the img (= image ) tag. The attribute is intended to indicate to a visitor surfing with image display turned off whether he/she should look at the picture or not.

The search engines do read and register the text in the "alt" attributes which means there should be a clear connection to the content on the same page. Many search engines, however, ignore "alt" attributes for non-clickable images - but you shouldn't make your pages for them only.

In December 2007 I checked in Google some search queries ( from my traffic data ) that as such didn't appear on anyone of my webpages. For one of the queries the "snippet" presented on the search results page consisted partly of the alt text for one of my pictures. This happened after I had switched on"Enable enhanced image search" in Goggle's webmasters' console. So may be it's something new and the alt text is even more important.

In May / June 2007 Google introduced "Universal search", which means different sources in Google's data banks are combined in the results on same search results page. For instance both webpages and pictures can come up for one certain query. This means the alt text is now very important.

Try to read your text aloud and when you get to a picture read the "alt" text. Does it make sense? The attribute belongs with the picture "call-up" tag and looks like this: <img src="images/picture_name.jpg" width="..." height="..." alt="Alternative text">
Especially if you are using layout tables it's important you include "width" and "height". If you don't and the picture isn't displayed, the full "alt" text is displayed on one line, and if it's long that table column will be extended and your whole page lay-out can get completely messed up. With the "width" and "height" measurements (in pixels) included, the "alt" text is restricted to the space within the rectangle. See picture below - effect of "alt" attribute on "mouse-over" is not shown in the print version.

Effect of alt attribute on mouse-over

Effect of alt attribute when picture is not displayed

"Alt" attribute displayed instead of picture.
The "alt" attribute is for pictures only. If you have an image instead of text with an outgoing link, the "alt" attribute should describe the content at the other end of the link - in this case it is instead of the link text.

According to a Google video from December 11, 2007, "25 words are enough". That "happens" to be the same number of words recommended as maximum in your "keywords" meta tag ( in English about 250 characters ).

All browsers - browser versions - do not treat the "Alt" text in the same way. For instance, every browser doesn't show the yellow rectangle. Some do it if you include the "title" attribute, i.e. use "title" instead of "alt" - but not all. This is why some webmasters include both "title" and "alt" attributes in the <img> tag. More about browsers, see Web Browsers.

IE ( Internet Explorer) displays "alt" text on "mouse over" while Firefox displays "title" text. If the picture cannot be found both browsers show the "alt" text. As they should !

What are "Title" Tags and "Title" attributes ?

<TITLE> tag, which is a "meta tag" giving the webpage name / heading, is not discussed on this page. For these tags see Don Pedro's Search Engine Marketing - Meta Tags.

With tables.
The effect of title="..." in the <table> tag is a yellow pop-up rectangle with the title text, when your visitor puts the mouse arrow anywhere inside the table (same as "ALT" attribute for pictures). It stays only close to 10 sec. and then goes off.

Example of effect of the title="..." attribute:

The "title" attribute is for tables with some content - regardless whether you use that table also for lay-out or not. The search engines read the "title" attribute when it is inside the <table> tag. You write the "title" attribute last:
<table border="0" width="...%" title="...">
When you specify table width in % it's better not to give the height at all because you wont know in advance what size screen your visitors will use. Let the browser adjust the height according to screen width - a wide screen will make columns wider and therefore shorter.

With pictures.
HTML 4.0 accepts title="..." also together with the "alt" attribute for pictures. In this case the "title" is what the word says; it is the title of the picture. I doubt if the search engines read this "title" attribute. IE displays "alt" attribute and Firefox displays the "title" attribute. That's the only reason why use both "alt" and "title" in the picture call-up code.

With outgoing links.
The link text is important for the search engines as it should correctly describe the content of the page the link goes to. This also helps your visitor to decide whether he/she should check that link or not.

If by some reason you have to use a company's or person's name as link text and it's not clear from the context what is hidden at the other end, you can add title=".." in the link code. Within the quotation marks you write a short description of the content where the link goes. When your visitor puts the mouse arrow on the link a yellow rectangle will pop-up with that description. The rectangle stays close to 10 seconds.

The link code you write as: <a href="http://www.example.com/..../" title="List of HTML sources">
Example of "link title" effect:

Don't overdo this, use it only when necessary. If you use an image instead of link text you do need an "alt" attribute with the picture "call-up" code. In this case do not add a "title" attribute to the link code - that's unnecessary.

With acronyms.
When you use only the first letter of each word, for instance, in an organisation's name, and write those as capital letters you have an acronym, i.e. UN for United Nations.

In many industry sectors there are acronyms that are in common use by that sector professionals but scarcely known by "outsiders". In such cases you can enclose that obscure term with the acronym tag. The result is same as the "title" with an outgoing link, the visitor gets a yellow rectangle with the full name for that acronym when the mouse is over the term.

Code example:
<acronym title="Internet Content Rating Association">ICRA</acronym>
Now when you put your mouse arrow on the letters ICRA in the example the yellow rectangle pops up and tells you the name of that association. If it doesn't, then your current browser doesn't support acronyms. Most browsers, however do - I have tested only in IE 6 and Firefox 2 and 3.

Summary

When composing the "alt / title" attribute text keep in mind the content of your page.

Keep your "alt" attributes brief and clear. Only what's needed to put the image into context. Some people will see only the alt-attribute
If your logo is a picture, then the "alt" attribute is what your logo says. See for instance the DonPedro's logo at the top of this page.
Use and write the "alt" and "title" attributes both for your visitors and search engines.

"Alt" and "title" Tags

What are "Alt" Tags / Attributes ?

What are "Title" Tags and "Title" attributes ?

Summary