Christine Hudnall

alt text & title attribute

Update: Apr 19, 2007 - I can’t answer for all blog software, but for WordPress, if adding an image to a post, you don’t have a say-so about using alt-text. So, make sure to put the Image Description option to good use - because that is actually the - Title attribute!

Make sure to include alt-text and the title attribute on your images, unless the image is purely ornamental. Some browsers do not acknowledge alt text, but will see the title attribute. But remember that alt text means alternate text, so use something meaningful. Title attribute means just that, it is the title.

Example:

<img src="imgfilehere.jpg" width="450px" height="331px" alt="[Double-crested Cormorant with striking teal colored eyes]" title="Double-crested Cormorant - Everglades National Park." />

As you can see, we’ve enclosed the alt text inside brackets, this is for text browsers and text-mode browsers. This makes it easier for text-mode browsers to associate the alt text with an image, but there is also another purpose. Say that you have 4 images in a row (or gallery!) and you include alt text, it would all get jumbled up together when read in text-mode or by a text browser.

Example:

<img src="minz.jpg" alt="male" /><img src="bullmoose.jpg" alt="moose" /><img src="girlsalad.jpg" alt="eating salad" /><img src="truckcab.jpg" alt="in truck" />

would look something like this when read in text-mode or text browser:

male moose eating salad in truck

by placing brackets around the alt it would look like this:

[male][moose][eating salad][in truck]

Now, it makes perfect sense, they are separate items! Had me worried, I went out to make sure that the male moose wasn’t eating salad in my truck!

Don’t forget though that not all images get alt text or title attribute. If it is ornamental, just for show or space, then just use:

<img src="navigationbullet.gif" width="20px" height="20px" alt=”” title=”” />