HTML and CSS Reference
In-Depth Information
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:
<img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png"
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.
1
Update the image element to include the
alt
attribute
“The typical new pencil can draw a line 35 miles long.”
2
3
Change the image name of “pencil.png” to “broken.png”. This
image doesn't actually exist, so you'll get a broken image.
4
Reload the page in your browser.
5
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…
