Why ALT and TITLE Tags Matter

Feb 19, 2016 | Blogging Tips & How-to

You understand the importance of including colorful, eye-catching images on your blog posts. But do you know why you should go to the extra effort to add alt and title tags, or attributes, to the image tag? These attributes provide important, additional information about your image in plain text format.

The alt attribute gives information about what happens if you click the image, if it’s a hyperlink. It’s purpose is to make web pages with images more accessible to people who have visual impairments. Imagine you have trouble seeing the screen clearly, and you rely on a screen reader program to help you use your PC and navigate the Internet. What would you want it to say, out loud, to let you know that there’s an image and what it is there for? Use the alt tag to describe the purpose, content, and function of the image.

The title attribute creates the “tooltip text,” a little pop-up box containing additional information about the image. Depending on the screen reader program, the title attribute may or may not be read aloud (it usually is, if the alt attribute is not present). You should always use the alt tag; the title tag is optional, but for variety’s sake, should contain slightly different information if both are used.

Here’s the syntax (you’ll have to edit this in HTML; if you use WordPress, click the Text tab):

<img src=”http://<image file name>” alt=”<describe what info the image contains, what happens if you click it>” title=”<tooltip text – description that pops up when you hover a cursor over it>” width=”<pixels>” height=”<pixels>” />

where <everything between angled brackets> is a variable, and <pixels> is a number of pixels designating height and width of the image.

If you use WordPress and you’ve neglected to add alt and title tags in the past, you can quickly “fix” the problem using a plug-in called SEO Image Tags. While not as good as hand-crafted, more meaningful alt tags, this lightweight utility simply ensures that all of your images an alt tag that corresponds to the image file name or the link destination, if the image is a clickable link. This helps both visually challenged readers and search engines.

Holly Jahangiri is the author of Trockle, illustrated by Jordan Vinyard; A Puppy, Not a Guppy, illustrated by Ryan Shaw; and the newest release: A New Leaf for Lyle, illustrated by Carrie Salazar. She draws inspiration from her family, from her own childhood adventures (some of which only happened in her overactive imagination), and from readers both young and young-at-heart. She lives in Houston, Texas, with her husband, J.J., whose love and encouragement make writing books twice the fun.


  1. Robin Khokhar

    Hi Holly,

    yes ALT tag for images in the SEO is given much more importance. I don’t know that you use SEO by yoast or not but one of the features of it mainly Focus on the ALt tag.
    Robin Khokhar recently posted…6 Ways TO Make Money OnlineMy Profile

    • HollyJahangiri

      Yes, and I realized I’d forgotten to add the info I’d intended to about the plug-in I found, yesterday, to help quickly ensure that images are compliant – if you have a lot of pages where you’ve neglected to take care of that issue. Thanks, Robin!

  2. Emma

    The advice I’m hearing in the disability community is that a detailed description under the image in the post is considered good practice and also that any audio also needs to be transcribed for those with hearing impairments (which is why I choose not to vlog).
    Emma recently posted…My First Decopatch ProjectsMy Profile

    • HollyJahangiri

      You might ask if the description is preferable to alt and title tags. My understanding was that the alt tag was developed specifically for screen readers like JAWS. I wouldn’t want to inflict three audio copies of the same information on a visually-impaired reader! I’ve done a bad job of it on this blog, up to now. For the most part, I’d say it doesn’t matter much except on the “how to” type posts with screenshots and visual aids. In most cases, the images are just “window dressing” and not essential to understanding the post.

  3. Alicia Butcher Ehrhardt

    Good ideas – my execution is going to be spotty.

    So: put something that describes the image into the Alt box, and something different into the Title box?

    Or is it a link in the Alt box and a description in the Title box?

    I’ll go look at it as soon as some brain cells kick on. They’re on strike.
    Alicia Butcher Ehrhardt recently posted…One way to read Pride’s Children for free: KOLLMy Profile

    • HollyJahangiri

      alt = a description of the action if you click the image, what the content of the image is. Primarily for screen reader programs – won’t be seen by people. (Will be read aloud by accessibility applications, and will be read by search engines.)

      title = additional info (could be the same, but that might be boring!); text you want to display if you hover your cursor over the image. (May be read by accessibility applications; will be read by search engines.)

    • HollyJahangiri

      Neeraj, thanks for raising the question and making me take a harder look. The problem appears to be the way the properties are implemented in WordPress. The short answer: Sort of…

      Here’s the deal:

      – Upload an image and enter all the properties in the dialogue.
      – Insert the image into a post.
      – WordPress keeps Alt and Caption, but drops Title and Description. (I think Description is only used in the back end, so you know why you added the image to your Media Library.)

      IF you edit the image in the post, after inserting it, you can edit Alt, Title, and Caption, affecting only that post (and overriding whatever was entered in the Media Library as the default). NOW the Title attribute is added to the HTML, as it should have been in the first place.

      It’s a little backwards, since Alt is meant for accessibility and screen readers (though in fact, both are usually read aloud, so it’s not as critical which is which, I don’t think).

      The main difference is this:

      Alt should describe what happens if you click the image. It should not only describe the contents of the image, but convey, in words, the point of including it (“shows that the second box displays a checkmark, meaning it is selected” – not just “shows the option selection dialog”). This is something that likely only comes up in “how to” type posts.

      Speaking of “newer versions of WordPress,” why did they remove the Title attribute from the hyperlink edit box? (It used to be alt – but then alt used to display the tooltip text, and now doesn’t, but title does.) I want it back!

  4. Mitch Mitchell

    I have to admit that I use both on my website but none of them on my blogs. Most of the images I use I get from Flickr via a plugin and those things are already loaded so I feel it would be disingenuous to override them. When I put up my personal images I don’t want them coded for some reason… I couldn’t begin to tell you why. 🙂
    Mitch Mitchell recently posted…Bloggers Are Leaders Because…My Profile


Submit a Comment

Your email address will not be published. Required fields are marked *

CommentLuv badge

Copyright © 1998-2020 Holly Jahangiri
Nothing on this website may be used without prior written consent of the author and owner.

Let’s Connect!

Do you like "unlimited" like I do? Subscribe to Medium for just $5/month, and read everything there is to read, for no extra charge. Use this link: https://hollyjahangiri.medium.com/membership and it will directly support my writing there each month.

Looking for Excellent Web Hosting?

PeoplesHost Web Hosting


I have been a happy customer here, myself. While this is an affiliate link, I'm just happy to promote PeoplesHost, because I have had nothing but great customer experience with them as my own web hosting provider.

Post Categories