Title or Alt? Which tag should you use for your image metadata?

The shortest answer to this question is ‘both, always’. The longer answer is exactly the same, but with more detail. Who’d have thought?

The Alt tag.

The ‘alt’ tag was originally developed for for sight impaired users using screen readers. With suitably descriptive text in your ‘alt’ tags, the screen reader can let the user know what the image contains, using either text to speech or text to brail. It is also very handy for very slow connections – in the (arguably) bad old days before broadband, some people would set their browsers to refrain from downloading images unless prompted to increase the speed of the page load. Again, the text in the ‘alt’ tag would inform them about the content of the image, and they could decide whether it would be worth looking at.

The Title tag.

The ‘title’ tag is meant for more than just images (as is, technically, the ‘alt’ tag – see here for a fuller explanation). For example, if you pause your cursor over the link in the parenthesis of the previous sentence, you will see what I mean. It is intended – and this is really important – to contain a concise and informative description of whatever element you attribute it to;

• Images
• Pages
• Links

Why is this important? Because this information is directly used for your search engine rankings. The contents of the title element of your page, your images, and anything else you attribute the tag to, will be used against the search query of anyone looking for information that matches your description. This should really be all the impetus you need for creating informative ‘title’ tags. You will also be making the world a more informative place.

This code will describe the image to the browser.

And this code will describe the image to the visitor, and the Internet.

Image courtesy of, and ©, Adam Stanford.

Back in the bad old days. . .

Back in the bad old days where the browser of choice was Internet Explorer, developers frequently used the ‘alt’ tag for alternative descriptions and image descriptions, instead of employing both ‘alt’ and ‘title’. This was largely due to the fact that when a user paused their cursor over an image, IE would display the information in the ‘alt’ tag in much the same way that the information in a ‘title’ tag would be displayed.

But then something happened to the Internet. . .

Firefox came out, achieved a notable share of the browser market, and was then followed by Chrome. Amongst a myriad of other differences from Internet Explorer, both Firefox and Chrome insisted on displaying html attributes correctly. After the long, botched, buggered and bewildering years of Internet Explorer abuse, this caught some developers by surprise. One of the surprises created by this sudden adherence to the rules was that the ‘alt’ tag no longer displayed an image description when the cursor was over an image. It didn’t feel it needed to – it wasn’t its job. And what with being a tiny scrap of code and everything, it had no idea how to let the ‘title’ tag know it was back in the game. That, chaps, is our job.

NB. Yes – there were plenty of other, more honourable browsers around before and during the dreadful IE years, but that is a story I don’t have time to write – and anyway, a group of people have already written it  – see ‘Browser wars‘.