Use ALT and TITLE attributes on images

It's highly recommended to use both the ALT and TITLE tags on images that you've uploaded to your blogs. Adding these attributes to name and title your photos are most beneficial for the following reasons:

• Descriptive text in both the attributes can be read by search engines for keywords/page content, thus improve the blog's accessibility, a form of advertising.
• An image without these attributes is just an image, illegible to search engines, unless you've already named your JPEG images before uploading from your computer. Most people just retain the IMG# as downloaded from their digital cameras.
• A necessity as the ALT attribute in HTML is the alternate text description for images. Its sole purpose is to describe images. Should an image not be loadable due to text-only browsers (especially for disabled users), slow internet connections or whatever, at least the alternate text description of the image will be seen.
• It enhances the blog's usability by providing helpful details or information for the readers or visitors.
• It makes your images discoverable by Google and other photo search engines, hence a way of promoting your blog.
• Some browsers support the TITLE attribute but not the ALT attribute or vice versa. So, my humble advice is to use both the attributes to images, which is the safest bet.

Here's how-to apply the ALT and TITLE attributes to your HTML codes for images:

1. As an example, this is an unnamed image uploaded from my computer and does not have the ALT and TITLE attributes as yet. When viewed in the Edit Html mode of the New Post Editor, it bears the following HTML codes, as follows :-
   
   i) first section as enclosed within the symbols < and > shows this:
   
   <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ysYzAT6bHO-f3jrAFViXaLRBHX_UMukb4FRVWxb639PcBEcWmutH_v1LrW3LE9OfifZW7ehF0PRpET417Wp9WrSzALn-9DY_3lIg9t_PnPnFcG-e-rxWXD1PCWnsL_s52bB1/s1600-h/IMG_2526+copy.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;">
   
   ii) second section for the image (img) tag, also enclosed within similar symbols < and ></a> shows this:
   
   <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ysYzAT6bHO-f3jrAFViXaLRBHX_UMukb4FRVWxb639PcBEcWmutH_v1LrW3LE9OfifZW7ehF0PRpET417Wp9WrSzALn-9DY_3lIg9t_PnPnFcG-e-rxWXD1PCWnsL_s52bB1/s320/IMG_2526+copy.jpg" /></a>
2. Now, all you need to do is to add the TITLE attribute, title="" and the ALT attribute, alt="" and the description of the image within the inverted commas.
   The descriptive text should be informative and meaningful, preferably in a complete sentence. For this picture, the text description to be used is "A view of our tropical home-garden design in Kuala Lumpur, on Sept 13 2009".
   Try to follow these how-to steps (the descriptive texts are colored and bold for easy viewing) :
   
   (i) add title="" together with the descriptive text of the image to the first section of the HTML codes. For this example, it should appear like this:
   
   <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ysYzAT6bHO-f3jrAFViXaLRBHX_UMukb4FRVWxb639PcBEcWmutH_v1LrW3LE9OfifZW7ehF0PRpET417Wp9WrSzALn-9DY_3lIg9t_PnPnFcG-e-rxWXD1PCWnsL_s52bB1/s1600-h/IMG_2526+copy.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" title="A view of our tropical home-garden design in Kuala Lumpur, on Sept 13 2009">
   
   (ii) next, add alt="" with the alternate text for the image to the second section of the HTML codes. It should appear as such:
   
   <img alt="A view of our tropical home-garden design in Kuala Lumpur, on Sept 13 2009" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ysYzAT6bHO-f3jrAFViXaLRBHX_UMukb4FRVWxb639PcBEcWmutH_v1LrW3LE9OfifZW7ehF0PRpET417Wp9WrSzALn-9DY_3lIg9t_PnPnFcG-e-rxWXD1PCWnsL_s52bB1/s320/IMG_2526+copy.jpg" /></a>
   (Tip: an easier way to do this is to copy the title attribute, already done in step (i), then paste it to where the alt attribute should be inserted and just change the word title to alt)

That's all you need to do...simple and easy! The final html codes should appear as such:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ysYzAT6bHO-f3jrAFViXaLRBHX_UMukb4FRVWxb639PcBEcWmutH_v1LrW3LE9OfifZW7ehF0PRpET417Wp9WrSzALn-9DY_3lIg9t_PnPnFcG-e-rxWXD1PCWnsL_s52bB1/s1600-h/IMG_2526+copy.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" title="A view of our tropical home-garden design in Kuala Lumpur, on Sept 13 2009"><img alt="A view of our tropical home-garden design in Kuala Lumpur, on Sept 13 2009" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ysYzAT6bHO-f3jrAFViXaLRBHX_UMukb4FRVWxb639PcBEcWmutH_v1LrW3LE9OfifZW7ehF0PRpET417Wp9WrSzALn-9DY_3lIg9t_PnPnFcG-e-rxWXD1PCWnsL_s52bB1/s320/IMG_2526+copy.jpg" /></a>


Click on the right image to view its larger version that illustrated clearly the correct insertion of both the ALT and TITLE tags.

The HTML codes for your uploaded image may not be exactly the same as the example given above, but the principle of inserting the TITLE and ALT tags is the same.

Try it... a simple action that does wonders to your images and blog in general. Practice makes perfect.

The garden photo on the right illustrates the resulting effect. Just test by rolling your mouse over it to read the image's description (the title).

Incidentally, if you're interested to visit our tropical garden, it's just a click away to John & Jacq's Garden here.

Hope this HTML tutorial on titling and naming your images has been useful.

Useful external links:

• Using ALT attributes smartly by Google Webmaster Central Blog
• Using ALT and TITLE attributes by Keynote NetMechanic
• Boost your search engine rank with alt tags by Keynote NetMechanic
• HTML img tag by w3schools