Skip to content

What are the “alt” and “title” tags in the tag? Do I need to use them?

The alt and title pieces of the <img src> tag are optional, but I would recommend that you use them as much as possible. There are three reasons:

  1. It helps you know what the image is in case it’s name isn’t terribly descriptive (as most pictures from digital cameras are named a string of numbers).
  2. It allows handicapped readers to know what the picture is because special software will read the alt and title tags out loud.
  3. If, for some reason, your picture does not load, the alt and title tags appear in that space and the reader will know what the picture portrayed.

To make use of these tags, let’s look at what a standard <img src> tag would contain:

<img src="picture.jpg" />

Let’s break that down:

  1. The <img src=> is telling the computer that it needs to call a picture.
  2. The file name in quotes ("picture.jpg") is the file or picture to be called.
  3. The / tells the computer that’s the end of the tag.

To make the tag even more useful, we include the alt and title tags within the <img src> tag so it looks like this:

<img alt="Blogging Basics 101 button" title="Blogging Basics 101 button2" src="picture.jpg" />

Note that the information for both the alt and title tags is contained in quotes:

alt="Blogging Basics 101 button" and title="Blogging Basics 101 button2"

If you notice that your tags aren’t working properly, ensure that you have the descriptive information in quotes and have a space between the final quotes in the alt tag and the word title. I’ve underlined it in the following example to show you where the space should be, but you don’t want to have the underline in your code.

<img alt="Blogging Basics 101 button"_title="Blogging Basics 101 button2" src="picture.jpg" />

The text of the alt and title tags can be the same and should be a description of the graphic, not just the graphic’s name. Although it seems redundant to include both the alt and title tags, you want to use both because some browsers read one and not the other.

2 thoughts on “What are the “alt” and “title” tags in the tag? Do I need to use them?”

  1. Thanks for keeping disabled readers in mind! My son “reads” my blog and surfs the Internet courtesy of JAWS for Windows, a screenreader software for the blind. It’s rather funny to hear my own words read in the monotone voice of the JAWS reader.

Comments are closed.