Search This Blog



If interested in advertising,
please contact me by email.

Formatting - ALT VS TITLE

I know that many of you simply want to type and not worry about any of the formatting mumbo jumbo, however, a little knowledge never hurt anyone and neither did making sure that your blog is read correctly by the search engines to enable you the greatest depth when the spiders crawl. No, that is not a signal to get out the pesticide! If you do not like clicking the "Edit HTML" button for your posts, you can still do this correctly. I'll explain and then show you...

The search engine spiders appreciate named pictures and crawl better over your site when they are named. To name an image, ALT tags (alternative text - just a label that is used to explain the content of an image) are used within the coding of the image HTML. TITLE tags also perform the same basic function AND can be used for element of the page (not just images) making TITLE tags seem to me the best choice. But wait, there's more. Let's start with a normal picture HTML code that will look something like this:

Example: <img src="http://www.ThePhotoSite/image.jpg">

It used to be that ALT was always chosen above a TITLE tag, but Internet Explorer 7 and Firefox choose TITLE over ALT. Both browsers use TITLE tags as the primary source, but it is still a requirement in some countries and browsers to use the ALT tag. Besides those two conflicting requirements, the most important of all is that ALT tags are still a basic requirement of the W3C WAI guidelines which state that they must be included for accessible websites. So in order for the images on your site to be crawled by all browsers and to be compliant with the guidelines, we must use both the TITLE and ALT tags and create redundant, duplicate text. Talk about inefficiencies!

Each image will have to include both:

Example: <img src="http://www.ThePhotoSite/image.jpg" title="Name of Image" alt="Name of Image" >

I hovered over, took a snapshot, and grabbed a picture from my Decorative Interiors Blogroll site as the example of how it will appear in all browsers since I used both the TITLE and required ALT tags.

example of ALT and TITLE tags

Try hovering over the above image and a different TITLE/ALT tag was used and will display.

A thing of beauty indeed! So how can you do this without clicking that frightening button to edit your HTML (uh, my sister is one of those people--Love ya Audrey!) you ask?

First, put this code in your posting...

Example: <img src="">

In a DIFFERENT internet browser page, go to the place where you upload your photos and grab the HTML code (See! It didn't bite you!)

example of Photobucket code choice

Drop the code that you copied from above into your posting between the "" (parentheses)

Example: <img src=" HERE ">

Add the required ALT and TITLE tags and now it looks something like this...

Example: <img src="" title="Name of Image" alt="Name of Image" >

Save and publish post. The picture formatted correctly will appear and the code will have disappeared into the HTML heaven of your published post. Also, if you hover over the image in any browser it will appear. Most of all, you are making the search engine spiders and internet rule makers happy. Gives you goosebumps doesn't it.


Anonymous said...

I love what you're doing here! You definitely have a dream and the can-do to get it done! Check out my post. If you would care to support it, that would be great. Even if you don't, you are still one amazing blogging mama!

Teresha@Marlie and Me said...

I love learning code!

Judy Harper said...

I can't get your award buttons to show! I tried following the above, but I must be missing something and now I've deleted your red riter button as well as the journal and SITS. I am so frustrated! What do you mean grab the HTML code? Do I copy the picture, then where do I go?

The Redhead Riter said...

Judy, I just created a posting on this site with directions. I also put a link under the button on all my sites leading to here:

If you still need help, let me know ♥

Related Posts with Thumbnails