HTML and CSS Reference
In-Depth Information
Listing 5-1.
The simplest incarnation of the
img
element
<img src="superhero.jpg" alt="A superhero">
Required Attributes
src
: Specifies the URL where the graphic file resides on a web server.
alt
: Provides an alternative text equivalent of the image. This attribute may be empty to indicate
nonessential images. It may be omitted under unusual circumstances, and only if a
title
attribute is supplied or if the
img
is a child of a
figure
element that also includes a
figcaption
.
Optional Attributes
width
: Specifies the width of the image in pixels.
height
: Specifies the height of the image in pixels.
ismap
: Declares that the image is used for a server-side image map.
usemap
: Identifies a client-side image map to be used (see Chapter 6 to learn more about image
maps).
crossorigin
: Cross-Origin Resource Sharing (CORS) settings, specifying that the image file
may or may not be served from other domains. This attribute can only have the values
anonymous
(the default) or
use-credentials
. The attribute with an empty value is equivalent to
anonymous
. The
crossorigin
attribute is new in HTML5 and mostly useful on secure websites.
For more on CORS, see
w3.org/TR/cors
.
The alt Attribute
The
alt
attribute provides a text alternative when the picture can't be seen or isn't available. It could be
that your reader is visually impaired, or using a browser or device that doesn't display the image, or the
image file couldn't be found at the source URL, or the file was corrupt or in an unsupported format.
Including a brief alternative text description preserves some of your image's communicative intent when
the image itself isn't visible. There's no explicit character limit for the value of an
alt
attribute, but
convention is to limit them to 1,024 characters (including spaces), and ideally less than 256 characters.
Shorter is better.
Some browsers, when they encounter a missing image, will display an icon and may show a border
indicating the image dimensions (if the dimensions are known), sometimes with the alternative text inside,
as Internet Explorer does in Figure 5-5. Other browsers show only the
alt
text as regular inline text, with
no border or extra space.
