- Send us a note
- info@addicottweb.com
- (773) 633-7078
Using the ALT and TITLE Attributes Properly
Are you new here?
If this is your first time visiting our website, welcome! Learn more about us and what we do, or look through our complete blog archives for more good ideas.
Posted on February 3, 2009 under SEO, Usability
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!
Similar Posts
- Simple Steps to Bolster SEO on Your Website (January 28, 2009)
- 9 Places to Insert Keywords on Your Website (September 23, 2009)
- 9 Ways to Make Your Links More Effective (April 16, 2009)
5 Comments
Trackbacks/Pingbacks
-
[...] Web Design Tip: Using the ALT and TITLE Attributes (Addicott Web) [...]
-
[...] by TJantunen in General, … | 04.05.2009 – 8:00 Addicott Web has a great article which provides a bit of history and explanation into the ALT and TITLE HTML attributes. You might [...]
Mr Web Design wrote on April 15, 2009:
Some good input here. Thanks!
Posted at 5:27 pm
Magan wrote on July 10, 2009:
It should also be noted that having alt attributes with images is required for some valid html.
Posted at 12:07 pm
Addicott Web wrote on July 10, 2009:
That’s a great point actually. XHTML, which is a stricter version of regular HTML, requires that you include ALT tags for your images. Before you validate the XHTML code of a website you’re creating, make sure that you have those in place, otherwise you’ll get a lot of errors in the validation.
Posted at 1:13 pm