img (HTML element)

Description

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>

The somewhat unsightly effect of this markup can be seen in Figure 1.

Figure 1. The image failing to create a break in the text

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.

Use This For …

This 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.

This 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. See the sections on the alt and longdesc attributes for more information.

Compatibility

It causes no compatibility issues, and has excellent support across all tested browsers.