I prepare practically all posts in the [Edit HTML] mode and you are highly encouraged to do the same. You get better control over your blog. HTML is not difficult, and as you browse through my Blogger related blogs (this blog as well as the blogs in my signature line at the bottom of this post), you will eventually pick up the more important elements of HTML. I guarantee you it will not be difficult. If you are more familiar with the COMPOSE (WYSIWYG or What You See Is What You Get) mode, don't fret. You can always check by clicking "Preview" and get WYSIWYG displayed, just as in the COMPOSE mode.
A typical script you will get after uploading the image is given below:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_jizoPL28qCY/SD_AiGSnP8I/AAAAAAAABfk/F5OUlKXf57E/s1600-h/comments+blogger+tips+and+tricks.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_jizoPL28qCY/SD_AiGSnP8I/AAAAAAAABfk/F5OUlKXf57E/s400/comments+blogger+tips+and+tricks.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5206091386300350402" /></a>
you will get when you upload an image like the one below (Update: If you use the updated post editor you will have to add the alt="" tag yourself, otherwise use the old post editor to upload images):
Note the alt="" highlighted in red. This is a HTML attribute which had been added by Blogger for your convenience. You are greatly encouraged to put some text between the quotation mark "", like for example, alt="some text" where "some text" are text which is descriptive of the image. For example, for the image above, I have edited alt="" to alt="Blogger Dashboard: 72 comments waiting for moderation".
The purpose of this alt attribute is so that if for some reason the image cannot be displayed, the ALTERNATIVE TEXT that you have put between the quotation mark in the alt="" attribute will be displayed instead. It will also be of the help to the visually handicapped as the alt text will be read out for them. Also some visitors may be using all text browser which will see the alt text instead of the image. Further, search engines which cannot read images will be able to read the alt text an idea of what the image is about.
Hi, Peter Chen ..
ReplyDeleteIts me again .. dcuteztphantom
I just wanna invite you to my blog again. I've uploaded a poll there. So.. can you give your vote ??? :)
Thank you ...
Emm.. by the way can you email me @ cyber.phantom79@yahoo.com and give some suggestions and critics about my blog, please. I think I need some help now :)
I'm glad that you are doing the same good articles as in the past months/years.
ReplyDeleteSome of them helped me a lot.
Best wishes,
Biceps brachii
Hi Peter,
ReplyDeleteGreat post. While I knew about the alt thing that when you hover your mouse over the image, it will display whatever is given in the alt tag and that it is crawled by search engine spiders.
But what does title do? How is it helpful? Especially considering that both alt and title contain the same text?
And can't believe that Peter who writes such big posts everyday complete with screenshots and images is lazy enough to type a 't'.
Thank you very much! This post really helped me get the alt working.
ReplyDeleteIv whacked it on my newest post.
sharpodue.blogspot.com
Thanks so much! I am a new blogger and have never heard of this before. Very helpful!
ReplyDeletevery nice...Thanks for tips
ReplyDeleteHi!
ReplyDeleteThank you for this tips!
You rock my friend!
See you around.
lunaticg.blogspot.com
Thank you! for showing that one must put the alt text in twice!
ReplyDeleteThanks Peter for the helpful instructions on adding an alt tag to a blogger image. Your explanation was the best one I found! It looks great on my website How To Pass The EPPP Exam Without Even Trying! (http://eppp-study.blogspot.com/2009/08/eppp-flashcards-eppp-study-supermemo.html).
ReplyDeleteHi Peter,
ReplyDeleteNone of my pictures have the 'alt=""' tag. Am I supposed to put that in myself? Also, my html looks nothing like yours. It doesn't start with "onblur...." and there's no 'border=0' in it. Just to name a few. What am I doing wrong? :(
La Frock, refer to images and the updated post editor.
ReplyDeleteDone. Thanks gajillion times.
ReplyDeleteHi all,
ReplyDeleteThis post may need updating because it seemed controversial whether to use duplicate text for both alt and title attribute. Check back later.
Hey Peter your article was great but i have got a problem.. coz i dont usually upload pictures directly to blogger instead i host them from photobucket because it reduces the loading time of my page... Then how can i use alt tags?
ReplyDeletePlease help me....
Tuan Ahamed Cassim
"SCIENTIFIC RESEARCHES AND FACTS"
No problem, alt="" and title can still be used for the codes you get from Photobucket as well as any <img> tag plus some other tags as well, eg, <a> you can add title="" so people hovering mouse over link can see what you wrote there.
ReplyDeletePeter how can i point out a specific image i hosted .. by searching 4 what in html code..by the title or alt="" ?
ReplyDelete"SCIENTIFIC RESEARCHES AND FACTS"
search for what you put in the alt="" tag including the quotation marks.
ReplyDeletePeter, there is only one alt tag in my html code ..if i insert something to that alt tag will this tag go to every image i am hosting?? I mean for example if i insert alt="globaltutor"
ReplyDeleteWill this tag applies for every image i have in my blog??
"SCIENTIFIC RESEARCHES AND FACTS"
Nothing you put in a post will apply to everything in your blog
ReplyDeletePeter, sorry 4 troubling u dis much..but i still have got this problem .. :(
ReplyDeleteDis is the problem i have now -
These r the alt tags i found...
1) < img expr:alt='data:title' expr:height='data:height'
2) < img expr:alt='data:title' expr:height='data:height'
3) < img expr:alt='data:title' expr:height='data:height'
4) < img expr:alt='data:title' expr:height='data:height'
5) < img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/>
6) < img alt='' class='icon-action' height='13'
7) < img alt='' class='icon-action' height='13'
8) < img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
9) < img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
10) < img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
These are the alt tags i found on my html code...
Peter pls can u inspect these and find me the solution plsss....
SCIENTIFIC RESEARCHES AND FACTS
First, I am not an IT person nor programmer, but I suspect that this:
ReplyDelete< img expr:alt='data:title' probably means whatever is in the title of something is the value of the alt='' tag.
regarding alt='', just complete it for eg. alt='some text'
This was super helpful. I feel like an HTML pro now. Thank you. I often embed photos or I use the newer system which doesn't automatically give you the alt="". When I went to add that in, nothing came up when I hovered the mouse over the image. But, when I did title="" it worked. Do you see any problems with my doing it this way?
ReplyDeleteThere should be no problem caused by adding the alt and title attributes as they serve different functions.
ReplyDeleteWhat exactly are the differences? I read that you should only use a title when the image links out and use the alt tag otherwise.
ReplyDeleteThe content in alt attribute is displayed in browsers when for some reason the image cannot be displayed (and is also read by screen readers used by people visually impaired) plus text only browsers.
ReplyDeleteThe content in title attribute is shown in the tool tip when a mouse is hovering over the image.
So you can see they serves different functions. However, using both for img is controversial and rather than joining in the controversy, I have long ago edited the post to leave out mention of the title attribute.
Oh just to add one more comment. Those who tells you to add the title attribute to the img tag when used as the anchor in a hyperlink probably is because they believe using img as the anchor does not provide info to search engine what that hyperlink links to. However, title attribute can also be added to the hyperlink tag <a href="" title="">
ReplyDeleteWell, I didn't see any alt tag in the html for images in blogger. Perhaps they have discontinued it.
ReplyDeleteIt will be there when you use the old post editor but for the updated post editor they have changed the code and you can add alt="" yourself, no issue.
ReplyDeletethis is very nice
ReplyDeletesee my site http://www.specialsedu.com
Really Helpful. Thank you very much.
ReplyDeletesee my blog
http://www.ed-that.com
I've been looking for this!
ReplyDeleteThanks :)
OMG! I love you people! Thank you so much!
ReplyDeleteThanks man ... thanks a lot... its help me to come at first page of google .. www.tamilsms.net
ReplyDeleteHow do you know when an alt tag actually is working?
ReplyDeleteThanks for the info; I'll have to add some alt text to my cartoons for sure. I am curious though, why there is no space between the quote marks and the 'id' code.
ReplyDelete