Apr 17 2016

Blogging lesson on the purpose of img alt #atozchallenge extra post #html

For those of you who already know about this, here’s a music video instead.



THIS POST ALSO APPEARS ON THE A TO Z CHALLENGE MAIN BLOG

I am not a coding expert. I learned all of this by watching other people, Google searching, and trial with lots of error. (Ha ha)

But here’s an important tip on something I do know about– using the img alt in the HTML of your posts.

  1. Blind and visually impaired people sometimes use the Internet. There are programs that read to them, partly using the HTML of websites. I didn’t know this when I started blogging. A blind woman told me about it. She said the “img alt” tag is used to read what the picture is of… assuming there’s an alt tag, of course. “Image of a woman on horseback.” vs “32343” You can understand now how defining your image is more useful than leaving just a number or something.
  2. Pinterest captions your pin based on what is written inside the alt tag. Readers hitting the share button might be too lazy to edit that. What do you want people to read when your image is clicked from the Pinterest (or other sharing) site? Tag yourself with your Twitter handle if you have one! It works.
  3. Sometimes image hosting sites go down. The picture you used doesn’t appear. What you wrote in the alt tag will show in place of the image. Consider what you’d at least like your readers to imagine for the downtime duration.
  4. With Internet Explorer, hovering the mouse over the image will create a small pop-up text block of the “alt” words. (Firefox and Opera do this with the TITLE tag instead of ALT. The two seem similar otherwise.)

Always keep it relevant, meaningful, and short!


And now it’s example time!

Blogging from #AtoZChallenge @AprilA2Z April 2016
The A to Z Challenge



The how and why of img alt code in HTML by @JLenniDorner Blogger image

The how and why of img alt code in HTML by @JLenniDorner WordPress image

WHAT DOES ALL THAT MEAN?

center means that it will be in the middle of post, not to the left.
a href I have hyperlinked my image. If you click it, it takes you to another webpage.
target=_blank That other webpage will open in a new window or new tab, so you don’t leave me!
img means image
src means source — that’s always the URL where the image is hosted
alt THAT’S what this image is about. I have Twitter handles and a hashtag to increase the viral trending.
backslash close your tags

NOW YOU KNOW!

#quote @JLenniDorner Ask not what the participants of the #AtoZChallenge can do for you, ask what you can do for them. #Kennedy

line break

Featured share of the day: Spring Fling blog hopSpring Fling blog hop


5 comments

Skip to comment form

  1. This is new to me. I upload images quite often on my blog but was not aware of the metadata tagging of images. I will be using in my future blogs.
    Thanks for sharing!
    Cheers!
    Karnika Kapoor has this post to share NihilismMy Profile
    Find on Twitter:

  2. This is really helpful! As with the previous commenter, I hadn’t really been aware of the issues around metadata tagging before. Thank you for sharing! I will be making a note of this, and going through all past and future pictures on my blog/website to make sure it all complies to this idea.

    Thanks!
    Find on Twitter:

  3. It’s interesting that Blogger still uses the older HTML tags rather than the HTML5 ones. Just an observation… 😉

    The alt text is also used by text-only browsers (yeah, there are still a few out there…) and when the browser can’t load the image for some reason.
    John Holton has this post to share The Week That Was for I-N Week, 2016My Profile
    Find on Twitter:

    1. I don’t use Blogger. I had to ask a friend for help to get that screenshot.

    • Kristi on April 20, 2016 at 3:08 PM

    Thank you! I’ve been trying to remember to caption my photos for readers who are visually-impaired, but will look into using this method, too.
    Find on Twitter:

Comments have been disabled.

%d bloggers like this: