Using the ALT and TITLE Attributes Properly

Web designers have two main ways to add descriptive text to page elements – the ALT attribute and the TITLE attribute. There is often some confusion about how these two attributes work, for they seem to work in similar ways. In reality, they have different purposes, so knowing what those differences are is important in order to use them properly.

What I’d like to talk about are the characteristics and general rules about how and when to use each attribute. But first, let me give you a little background on just what these attributes are.

ALT Attribute

“ALT” simply standards for “alternative”, and ALT attributes are intended to be descriptions that can be seen instead of images, either before the image loads or if it does not load at all.

The ALT attribute is an important element to the accessibility community. It began as a way for people who are blind and use screen readers (or people who use text-only web browsers) to know when there was an image on the page they were reading.

From an SEO perspective, ALT attributes may or may not benefit your website – there is still no conclusive school of thought on the subject. Most people will agree though that tThey are just another opportunity for you to put code on your page that the search engines will read, and should be taken advantage of as one of the basic steps to make your website SEO-friendly.

That being said though, don’t abuse the ALT attribute for SEO purposes only. Keep in mind some of these tips for how to write them:

• Make them as specific and descriptive as possible without being too lengthy
• If an image contains text, the ALT attribute should replicate the text in full
• Avoid being vague or writing text that isn’t related to the image or context of the content around it
• Don’t use the image’s file name as the ALT attribute

TITLE Attribute

The TITLE attribute can be used with almost all HTML elements on your website. While the ALT attribute emerged from the accessibility world, the TITLE attribute emerged from the usability standpoint.

There are two main roles that TITLE attributes can have:

• Descriptive – Use the TITLE attribute on such things as form fields to let your visitors know what the intended purpose of an element on your website is.
• Advisory – Use TITLE attributes on text or image links to let visitors know where they are being taken to when they click on the link.

You’ll know when something has a TITLE attribute specified because it will appear as a tool-tip when you hover over the link.

When it comes to links, the most important thing to keep in mind is that visitors to a website don’t like to be surprised about where a link will take them. They want to know where they’re going so that they can choose whether to follow that link or not. But you don’t necessarily need a TITLE attribute on every text link on your website. Only use them if the actual text of the link, or the surrounding context of it, is somewhat vague about where the visitor will be sent to if they click on it.

As with ALT attributes, there is still no agreement on whether they help you in SEO. Most web designers do agree though that they should be taken used as another one of the basic steps to make your website SEO-friendly. Just keep in mind that even if they are SEO-friendly, that doesn’t mean they should be abused. Specifically, you shouldn’t:

• Write the TITLE text with only the search engines in mind
• Use them to duplicate content elsewhere on the page
• Stuff them full of keywords that make them completely unhelpful

Here’s a simple way to understand how to write your TITLE attributes: write them so that they are descriptive enough to help your human users, and that should be enough to give you some SEO benefit as a result.

Images that are links

There is always some confusion about which attributes to use when an image is a link. Should you use an ALT attribute, a TITLE attribute, both, or neither, and if so, what should the text of those attributes be?

My answer to those questions is that it all depends on what the actual image is:

• If it contains a lot text – If the image contains text directing people to do something, then you should use both attributes – ALT text for the image and a TITLE attribute for the link. The text of both should be what the image says to do. For a good example, look at how I used these attributes on the “Enjoy this article” button at the bottom of this post.
• If it has only a few words of text – In this instance, your attributes will need to be a little more descriptive because the image itself isn’t. For example, if you have a nicely styled “Contact Us” button (as I do on the home page of this website), you need to be a bit more creative in how you write both attributes.
• If it doesn’t have any text – This is where you need to be the most creative, because the image itself doesn’t give you any guidance. In general, if you try to be as descriptive and action-oriented as possible, while perhaps incorporating one or two of your keywords, you should be golden.

Think before using

In general, you should use both elements when working on a website, but you need to be careful not to overuse them when it’s not necessary to have them. Good web designers know how to use these attributes, but great designers know when to use them – and that’s a big difference.

What are your thoughts on these using the ALT and TITLE attributes on websites? If you’re a web designer, do you use them in your designs? Do you think that the benefits are worth it, either in terms of the search engines, or from your users’ point of view? Share your thoughts with everyone by filling out the comment form below!