img Element

 

Module

The img element is an inline element declared by the XHTML 1.1 Images Module

This is the only element in this Module.

Description

The img element is used to insert an image into a document. The location of the image is given by the element's mandatory src attribute. The alt attribute (also mandatory) is used to specify short alternative text for the image which will be displayed in user agents which do not support images or have them disabled. Purely aesthetic images carrying no useful information should be given an empty alt attribute. A longer description of a detailed image may be created at a separated URI and then referenced using the optional longdesc attribute; this attribute is not well supported, however, and is therefore of limited use - a separate link to the detailed description is best provided using a conventional hyperlink (see the a element).

An image may be given explicit dimensions using the height and width attributes so that the user agent immediately knows how much screen space the image will cover, thereby speeding up the rendering process.

The img element is an inline element, enabling images to be contained within paragraph text, for instance.

Vertical alignment of images within paragraph text can be controlled to a certain degree using the CSS vertical-align property. The rendered image above has no styling applied to it, however, and is therefore displayed using your browser's default behaviour.

If the example above is viewed in a non-graphical browser - or with images disabled - the alt text "images" is used in place of the image and the paragraph reads naturally. If instead the alternative text had been "Picture of the word images" (which admittedly does describe the image) the resulting paragraph text would have been confusing: "You can include Picture of the word images within the text of a paragraph.". Always construct alternative text so that the content makes maximum possible sense when images are not rendered.

Image maps may be created using either the Server-side Image Map Module or the Client-side Image Map Module.

#REQUIRED Attributes

The alt and src attributes are #REQUIRED on the img element.

---

Specific Attributes

From the Images Module - the Element's own Module

alt [ type Text - #REQUIRED ]

Alternative text for the image

height [ type Length ]

The height of the image, either in pixels or as a percentage of the available vertical space (usually the parent element's height) - this will override any natural image height, and the image will be appropriately scaled

longdesc [ type URI ]

URI containing a long description of the image - may be used to expand upon the short description in alt

src [ type URI - #REQUIRED ]

URI of the image

width [ type Length ]

The width of the image, either in pixels or as a percentage of the available horizontal space (usually the parent element's width) - this will override any natural image width, and the image will be appropriately scaled

From the Client-side Image Map Module

usemap [ type IDREF ]

The id of a map element to be applied to the image

From the Server-side Image Map Module

ismap [ type Boolean ]

Indicates that the image is a server-side image map

---

Common Attributes

From the Core Attribute Collection

class [ type NMTOKENS ]

One or more space separated classes

id [ type ID ]

A unique identifier for the element

style [ type CDATA ], from the Style Attribute Module (deprecated)

Element-specific styles

title [ type Text ]

Descriptive title for the element (in some user agents this may appear as a "tooltip" when the mouse hovers over the element)

xmlns [ type URI - #FIXED 'http://www.w3.org/1999/xhtml' ]

XML namespace

From the I18N Attribute Collection

dir [ type Enumeration (ltr | rtl) ], from the Bi-directional Text Module

Left-to-right or right-to-left directionality

xml:lang [ type LanguageCode ]

A language code for the element

From the Events Attribute Collection

All attributes in the Events Attribute Collection are supported:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

---

Content Model

The Content Model for the img element is:

EMPTY

See Content Model & Nesting for information about Content Model syntax and Nesting Groups.

Valid children of img

This element is empty and may have no children.

Valid parents of img

• From the Text Module: abbr, acronym, address, cite, code, dfn, div, em, h1 - h6, kbd, p, q, samp, span, strong, var
• From the Hypertext Module: a
• From the List Module: dd, dt, li
• From the Tables Module: caption, td, th
• From the Forms Module: button, fieldset, label, legend
• From the Presentation Module: b, big, i, small, sub, sup, tt
• From the Edit Module: del, ins
• From the Bi-directional Text Module: bdo
• From the Object Module: object
• From the Ruby Annotation Module: rb, rt