Smartlab Software logo

About the Alt Attribute

What is the Alt Attribute?

The alt attribute, or alternative attribute, was designed to provide a text description of an image if the image cannot be rendered. In fact it is part of the HTML coding standard. The uses are many:

  • Visually impaired people have audio readers that use the alt attribute
  • alt text appears if the user has turned off browser image loading
  • a missing image will show up with a red X and the alt text beside it
  • some search engines use alt text to help classify the image
  • web phones have limited bandwidth and many do not display images
  • For top of the page images
    Describe the header image and add on the purpose of the page. For example:
    Smartlab Software Logo - About the Alt Attribute
    or
    Wine Vineyard - Contact Us

Note that the alt text is a replacement for the image, the title gives a brief description (caption) of the image, and the longdesc file gives a long description of the image. The alt text is not supposed to be a description of the image, it is supposed to be an alternative representation of the meaning of the image.

The search engines gather information about the image through several sources:

  • Image file name (image1234.jpg vs. laptop-computer.jpg)
  • Text immediately surrounding the image
  • The overall content of the page the image is on
  • Image ALT attribute in the image tag

ALT attributes can use to add some flavor to navigation images such as "About Us" can have alt text like "learn more about xyz company".

Check your web page with images turned off. See if the descriptions and navigation makes sense.

If you have a better business bureau image you can spruce up the alt attribute like:

alt="We are a Better Business Bureau accredited business. Click here to verify our BBB rating."

Alt Attribute Coding

Alt attribute coding differs between HTML and XHTML

HTML example:

<img src="img.jpg" width="90" height="80" alt="open casement window">


XHTML example:

<img src="img.jpg" width="90" height="80" alt="open casement window" />

Put no text in the alt attribute for spacers, decorative images, or any page formatting.

HTML example:

<img src="spacer.gif" width="1" height="5" alt="">


XHTML example:

<img src="spacer.gif" width="1" height="5" alt="" />

Tips on Writing an alt Attribute

  • Images that are links should describe where they go
  • Don't begin with "Photo of" or "Picture of"
  • Describe the use of the image; not the image itself

Negative Uses of the Alt Attribute

The alt attribute can be abused and in some cases have a detrimental effect on SEO efforts.

  • Do not overstuff keywords in the alt attribute.
  • Do not hide keywords in images used for design and spacing.
  • Do not specify meaningless text. This will irritate and confuse the user.