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.