>img<

  <img alt="string" height=" { number | percentage } " src="uri" width=" { number | percentage } " />

The >img< element provides a means for embedding an image in the document, which can be used for as many different purposes as your imagination allows. With just the couple of required attributes shown in the example, the img provides a reference to the image file to display, and a text alternative should the image not be available for whatever reason. A number of optional, and deprecated, attributes are covered below in detail.

As it’s an empty element, the >img< element requires a trailing slash if it’s to be XHTML-compliant, but it can be expressed in HTML as follows:

  <img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina">

As an image is an inline element, a break isn’t created before or after it, so the following HTML would render with the text appearing on either side of the image:

  <p>Driving along, we spotted a giant prawn <img
    src="giant-prawn.jpg" alt="The Giant Prawn at Ballina">,
    so we had to stop and take a closer look.</p>

However, with CSS you can achieve great control over the >img< element, creating wrapping text with margins (or gutters, to use the print analogy), border styles, and more.

Some presentational attributes, which control alignment and dimensions, are covered below, but these effects are best controlled using CSS.

  Example
  Here’s an img element for which only the required attributes are specified (src and alt):
  <img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina"/>

The <img> element is used to place illustrative images—pictures that convey some important information. It’s not used for purely decorative images that don’t offer any information, and which could easily be removed from the page without detriment to its content. Such noncritical, decorative images may be better implemented using the CSS background-image property.

The <img> element can be used for photographs, charts and graphs, and maps. Even when it’s used for images that may be difficult to accurately describe in words (for instance, a trend may be seen easily on a graph, but its meaning may be impossible to understand in the absence of the image, for whatever reason), it’s important to ensure that an alternative description is available, therefore, when plausible, you should use the alt="" and longdesc="" attributes.

Must I have an alt attribute for every image?

Yes, the alt attribute is required for the img element type. Why? Well, not all users can see images and not all user agents can understand or display images. For example:

• * A person who is blind or has very low vision cannot see an image. A screen reader cannot describe an image.
• Users with slow connections (dial-up or mobile) sometimes disable images for faster surfing.
• Text browsers like Lynx do not support images.
• Search engine bots cannot understand images.

Thus we have to provide a text equivalent for each image, using the alt attribute. This text equivalent should not describe the image; it should convey the equivalent information. Writing good text equivalents is not easy, and it takes a lot of practice. Remember that the text equivalent is displayed instead of the image.

So what is a good text equivalent for a given image? That depends on the context in which the image is used! It's not like there is a single "perfect" text equivalent for each image. Let us look at an example: say we have an image of a grazing cow. This particular cow happens to be an Aberdeen Angus. Let us then consider a few use cases for this image.

In the first case, this image is used as a generic illustration for an article about beef cattle farming in Scotland. The actual cow isn't germane to the article; it's just an illustration, a decorative design element that draws the reader's eye and relieves the monotony of the text. In this case, the image doesn't convey any relevant information. Therefore it should have an empty text equivalent: alt="".

In the second case, the image is used on a children's web site about farm animals. The page shows pictures of various animals: a horse, a sheep, a pig, a cow, etc. Next to each image is a block of text that presents some facts about each species. In this case, alt="Cow" could be appropriate. It's not important that it's an Aberdeen Angus; the picture represents bovine quadrupeds in general.

In the third case, the image is used on a site about different breeds of cattle. Here it is used to illustrate what an Aberdeen Angus looks like, and how it is different from other breeds. The page comprises a number of images, each with a caption that identifies the breed, but no other textual information. In this case, the text equivalent should describe the particular attributes and traits that are specific to an Aberdeen Angus: the robust build, the massive chest, the relatively short legs, the buffalo-like hump behind the head, etc.

In the fourth case, the image is used on a photographer's portfolio page. It's one image among several others, with very different motifs. This is one of the few cases where the alt attribute might actually include a description of the image itself, e.g., "A black Aberdeen Angus grazing in the sunshine with Ben Nevis in the background."

As we can see, the appropriate text equivalent depends on the context. Sometimes (often, actually) it should be empty, because the image doesn't convey any information that isn't available in the accompanying text. Some claim that such images should be background images specified via CSS, but there are many cases where that is impractical and where the image is really part of the content -- even though it doesn't convey any useful information to those who cannot see it.

For images that contain text, the text equivalent should of course replicate the text in the image. For things like pie charts, the text equivalent should convey information about the percentages -- the same information as the image conveys.

The alternate text shouldn't be too long. Some browsers don't word-wrap text equivalents, and they cannot be formatted in any way. If we need a longer text equivalent, we should put it somewhere else and link to it via the longdesc attribute.

Internet Explorer and old Netscape browsers display the alt attribute in a tool-tip when the user hovers the mouse pointer over the image. This constitutes an incorrect use of text equivalent data. We should use the title attribute for "tool-tip" information. To suppress the alternate text appearing in tool tips, we can use an empty title: title="".