The Best-Practice Guide to xHTML and CSS phần 4 doc

76 |  chapter 4: Images

Figure 4.1 The illustrations in this chapter are taken from the Vivabit website (vivabit.com).

The img Element

The img element allows you to plonk an image straight into your HTML.

<img src=”images/sifaka.jpg” alt=”Leaping sifaka” />

The required src attribute points to the location of the image file.

The alt attribute, which is also required, is for specifying alternative text. It serves

an important accessibility task: It provides an “alternative” to the image for those

who cannot see the image itself (such as those reliant on screen-readers). As an

added bonus, most browsers use this attribute to provide placeholder text while the

image is downloading. The value can give an idea of what the image represents,

but doesn’t have to—it can be anything that would adequately serve as alternative

content to the image.

www.htmldog.com/examples/images1.html

You can also use the longdesc attribute, the value of which would be the location

(in the form of a URL) of a description of the image. The idea behind this is that

when there is a very detailed image (such as a map or a chart) that may need a

solid, long explanation, you don’t necessarily want to bog down the page with mas￾sive alt attributes (which should be short and sweet). longdesc gives the user an

option to navigate to a page that will explain what is going on.

Border Annihilation

Note that if you include an img element inside a link, browsers will tend to

apply a border to the image by default. You can easily annihilate the border with

CSS—img { border: 0; }. See Chapter 3 for more on links and Chapter 5 for

more on borders.

The Img Element  | 77

78 |  chapter 4: Images

Figure 4.2 Even in a graphically rich web page, img elements tend to be few and far

between. Take a sub-page from this website, for example…