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
<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.
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 …
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
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
attributes for more information.
It causes no compatibility issues, and has excellent support across all tested browsers.