Foundation HTML5 with CSS3

Chapter 5

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.