HTML and CSS Reference
Always provide an alternative
One thing you can be sure of on the Web is that you never know exactly which
browsers and devices will be used to view your pages. Visitors are likely to show
up with mobile devices, screen readers for the visually impaired, browsers that are
running over very slow Internet connections (and may retrieve only the text, not
the images, of a site), cell phones, Internet-enabled T-shirts…Who knows?
But in the middle of all this uncertainty, you can be prepared . Even if a browser can't
display the images on your page, there is an alternative. You can give the visitor
some indication of what information is in the image using the <img> element's
alt attribute. Here's how it works:
alt="The typical new pencil can draw a line 35 miles long.">
If the i mage can't be displayed, the n this
text is used in its pla ce. It's like if you
were re ading the web page over the phone
to some one, the alt t ext is what yo u'd say
in place of the image.
In this exercise you're going to see how your browser handles the alt attribute when you have
a broken image. The theory goes that if an image can't be found, the alt attribute is displayed
instead. But not all browsers implement this, so your results may vary. Here's what you need to do:
Take your HTML from the previous exercise.
Update the image element to include the alt attribute
“The typical new pencil can draw a line 35 miles long.”
Change the image name of “pencil.png” to “broken.png”. This
image doesn't actually exist, so you'll get a broken image.
Reload the page in your browser.
Finally, download a couple of other browsers and give this a
try. Did you get different results?
For inst ance , yo u co uld t ry F iref ox
(ht tp:/ /ww w.mo zilla .org /) o r Op era
(ht tp:/ /ww w.op era.c om/ ).
Look at the end of the chapter to see our results…