Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

<img>

img<
align=absbottom|absmiddle|baseline|bottom|left|
center|right|top|middle
|
alt=text
border=n
class=type
controls
dir=ltr|rtr
dynsrc=url
height=n
hspace=n
id=value
ismap=image
lang=language
longdesc=url
loop=n
src=url
start=start-event
style=style
title=text
usemap=url
vspace=n
width=n
</img>

Inserts an picture into an HTML page.

Attributes

align=absbottom|absmiddle|baseline|bottom|left|center
|right|top|middle|texttop

Sets the alignment of the picture. You must use this attribute if you want text to wrap around a picture. The default is top.

Value…

Description…

absbottom

Aligns the bottom of the picture with the bottom of the current line

absmiddle

Aligns the middle of the current line with the middle of the picture

baseline

Aligns the bottom of the picture with the baseline of the current line

bottom

Surrounding text is aligned with the bottom of the picture

left

The picture is drawn as a left-flush "floating picture," and text flows around it

center

Surrounding text is aligned with the centre of the picture

right

The picture is drawn as a right-flush "floating picture," and text flows around it

top

Surrounding text is aligned with the top of the picture

middle

Surrounding text is aligned with the middle of the picture

texttop

Aligns itself with the top of the tallest text in the line

alt=text

Specifies the text that you want to display instead of the picture if Show Pictures is turned off or if the browser does not display pictures. You should enter alternative text for all your pictures.

border=n

Specifies the size of a border (in pixels) to be drawn around the picture. If the picture is a link, the border is drawn in the appropriate link colour. If the picture is not a link, the border is invisible. Set to zero to turn off the border.

class=type

Indicates the class to which the tag belongs. You can use the class attribute in a style sheet to create different styles that you want apply to a single HTML tag. For example, you might create three different styles for a <img> tag. See Using the class attribute as a selector for more details.

controls

Use in conjunction with dynsrc. Displays a set of controls (play, pause, skip) under the video clip window.

dir=ltr|rtr

Specifies the direction of text. This can be left-to-right (ltr) or right-to-left (rtl). For example, English characters are presented left-to-right, Hebrew characters are presented right-to-left.

dynsrc=url

Specifies the address of a video clip or VRML world to be displayed in the window. The clips must be in avi format. The controls, start, and loop attributes determine how the video plays.

Always include a still image for use by browsers that do not display video.

I think this attribute only works in Internet Explorer.

height=n

The height of the picture. You should always give the height of the picture because the browser can then display the text before the pictures have loaded. This makes the page seem to load quicker.

If the picture's actual dimensions differ from those you specify, the browser stretches the picture to match what you specify. Internet Explorer also uses this to draw a placeholder of appropriate size for the picture before it loads.

hspace=n

Along with vspace, specifies margins for the picture. Similar to border, except the margins are not painted with colour when the picture is a link.

id=value

Specifies a unique name for the tag. No two tags can have the same id on a single page. The value must begin with a letter followed by any alphanumeric character, a hyphen, an underscore, a colon or a full stop. You use it to reference a unique style for a tag or to manipulate the tag with a script.

ismap=image

Identifies the picture as a server-side image map. Clicking the picture transmits the co-ordinates of the click back to the server, triggering a jump to another page. See Setting up a server-side image maps for more details.

lang=language

Specifies which language the <img> tag uses. You can enter any valid ISO standard language abbreviation, for example, “en” for English, “de” for German and so on. For example, <span lang="es">hola! como esta?</span>.

This attribute helps search engines understand different languages as different languages rather than just misspelled English. It may also help spelling and grammar checkers and allow speech synthesizers to use language-dependent pronunciation rules.

longdesc=url

Specifies a link to a long description of the picture. This description should supplement the short description provided using the title attribute and may be particularly useful for speech browsers.

loop=n

Specifies how many times to play a video clip. If loop is either -1 or INFINITE, the video clip plays continuously as long as the page is open.

src=url

Specifies the address of the picture to insert.

start=start-event

Specifies when the file specified by the dynsrc attribute should start playing. One of:

Value…

Description…

fileopen

Start playing as soon as the file opens. This is the default

mouseover

Start playing when you move the mouse over the animation

Both values can be set but must be separated with a comma.

style=style

Specifies style information. See Style sheets for more information.

title=text

For information only. Some browsers display the title when you move the mouse over the tag (like a tool tip).

usemap=url

Identifies the picture as a client-side image map. It specifies a <map> definition for the browser to use to decide where to go when the user clicks on the image. The map definition can be in the HTML page or in a separate file. For more information, see Setting up a client-side image map.

vspace=n

Along with hspace, specifies margins for the picture. Similar to border, except the margins are not painted with colour when the picture is a hyperlink.

width=n

The width of the picture. You should always give the width of the picture because the browser can then display the text before the pictures load. This makes the page seem to load quicker.

If the picture's actual dimensions differ from those you specify, the browser stretches the picture to match what you specify. Internet Explorer also uses this to draw a placeholder of appropriate size for the picture before it is loaded.