Main Index |
Top Of Tree |
Tag Index |
Tag History
- What is it?
- The IMG tag is the main method for including multimedia content
in an HTML document, accomplished via in-line graphics. There are more
attributes to the IMG tag than to any other traditional tag, and this
document is very long (stay with me now...)
- Attributes
- Align
- 2
| 3 | 3.2
| IE1 | M1
| N1
- Required? No
- Description:
This attribute specifies the alignment of text following the IMG
reference relative to the graphic on screen. LEFT and RIGHT specify
floating horizontal alignment of the image in the browser window,
and subsequent text will wrap around the image. The other options
specify vertical alignment of text relative to the image on the
same line.
- Values:
Left | Right |
Top | Texttop |
Middle | Absmiddle |
Baseline | Bottom |
Absbottom
- Alt
- 2 | 3
| 3.2 | IE1
| M2 | N1
- Required? No
- Description:
This is text to be displayed in place of an image for browsers that
can not handle this ability or for browsers that have disabled this
ability.
- Values: Alphanumeric characters
- Border
- 2 | 3
| 3.2 | IE1
| M3B2 | N1.1
- Required? No
- Description:
This controls the thickness of the border around the image (in pixels)
whether as a hyperlink or as a stand-alone image. If the image is
stand-alone, the border color will usually be the color of the surrounding
text (affected also by the TEXT attribute to the BODY tag.) If the image
is within a hyperlink the border color will the default hyperlink color
(affected also by the LINK/VLINK attributes to the BODY tag.)
- Values:
0, for no border, or a positive integer pixel
value.
- CONTROLS
- 2 | 3
| 3.2 | IE2
| M | N
- Required? No
- Description:
This standalone attribute specifies a set of video controls be
available to the user in order to allow the user the ability to pause,
stop, re-start or skip parts of the video. It is used in conjunction
with the DYNSRC attribute.
- Values: NA
- DynSrc
- 2 | 3
| 3.2 | IE2
| M | N
- Required? No
- Description:
This attribute specifies the URL of an in-line video.
- Values: An absolute or relative URL.
- Height
- 2 | 3
| 3.2 | IE1
| M3B2 | N1.1
- Required? No
- Description:
This attribute explicitly specifies the height of the graphic in pixels.
It is mainly used to create custom image dimensions without physically
changing the image itself. It can also be used to speed up display of
the document being downloaded so it can pre-render the document with
image placeholders while the images download.
- Values: Positive integer pixel values
- HSpace
- 2 | 3
| 3.2 | IE1
| M | N1.1
- Required? No
- Description:
This attribute specifies the horizontal spacing around images in pixels
(left and right side padding.)
- Values: Positive integer pixel values
- ISMap
- 2
| 3 | 3.2
| IE1 | M1
| N1
- Required? No
- Description:
This is a stand-alone attribute which is used in combination with a
hyperlink to identify the image as a sensitive map. When used in
combination with a hyperlink whose destination is a coordinate map
file, the browser sends the coordinates clicked on by the user to
the map file for processing.
The map file is a series of shape names with associated coordinate
values that list corresponding URLs to jump to when the coordinates
are received.
- Values: NA
- Loop
- 2 | 3
| 3.2 | IE2
| M | N
- Required? No
- Description:
This attribute specifies the number of times the video will play.
This attribute is used in conjunction with the DYNSRC attribute.
- Values:
Specified as a positive integer, or Infinite
(or -1) which will play the sound indefinitely.
- LowSrc
- 2 | 3
| 3.2 | IE
| M | N1.1
- Required? No
- Description:
This attribute specifies the URL of a low-resolution image to be
downloaded before a higher resolution image. The reasoning is that a
low-resolution image is smaller in size than a higher resolution image
and is thus faster to download. After the lowres image has been
downloaded, it is displayed until the high resolution image is
downloaded.
- Values: Either an absolute or relative URL.
- Src
- 2
| 3 | 3.2
| IE1 | M1
| N1
- Required? Yes
- Description:
Indicates the URL to reference the graphic.
- Values: Either an absolute or relative URL.
- Start
- 2 | 3
| 3.2 | IE2
| M | N
- Required? No
- Description:
This attribute specifies when the video will start playing. This
attribute is used in conjunction with the DYNSRC attribute.
- Values:
Fileopen
[The video starts as soon as it is finished loading]
Mouseover
[The video should start playing when the user moves the mouse
over the video clip.]
- UseMap
- 2 | 3
| 3.2 | IE1
| M2.1 | N2
- Required? No
- Description:
This attribute specifies the URL(usually internal to the document) of
the client-side image map specification to be used if the browser has
that capability. If the argument to USEMAP begins with a "#"
it is assumed to be in the same document as the IMG tag. This attribute
is well used in conjunction with the ISMAP attribute for browsers that
cannot understand client-side image maps. Client-side coordinate
mapping is done by the browser, so is inherently faster in processing
the coordinates than the ISMAP process. The presence of a USEMAP
attribute overrides the effect of an anchor (A) tag surrounding the
IMG tag.
- Values: An absolute or relative URL
or an internal anchor name.
- VRML
- 2 | 3
| 3.2 | IE2
| M | N
- Required? No
- Description:
This attribute specifies the URL of an inline VRML world. Use of this
attribute will launch a VRML viewer if one is installed on the machine.
- Values: An absolute or relative URL
- VSpace
- 2 | 3
| 3.2 | IE1
| M | N1.1
- Required? No
- Description:
This attribute specifies the vertical spacing around images in pixels
(top and bottom padding.) Values are specified in positive integers.
- Values: Positive integer pixel values
- Width
- 2 | 3
| 3.2 | IE1
| M3B2 | N1.1
- Required? No
- Description:
This attribute explicitly specifies the width of the graphic in pixels.
It is mainly used to create custom image dimensions without having to
physically change the image itself. It can also be used to speed up
display of the document being downloaded so it can pre-render the document
with image placeholders while the images download.
- Values: Positive integer pixel values
Style Sheet Attributes
[More on Cascading Style Sheets]
- Class
- 2 | 3
| 3.2 | IE3B1
| M | N4B2
- Required? No
- Description:
This represents an assigned semantic classification grouping(s) for the
current tag.
- Values:
Given as a comma separated list of alphanumeric characters. Class names
may contain spaces (multiple consecutive spaces treated as a single
space.)
- ID
- 2 | 3
| 3.2 | IE3B1
| M | N4B2
- Required? No
- Description:
This assigns an alpha-numeric identifier that is unique
to this tag instance. Style sheets may use this attribute to reference
the current instance of this tag. Hyperlinks may also use this identifier
to serve as a destination.
- Values:
An alphanumeric string - initial character must be a letter followed
by alphabetic characters, digits, "-" or "."
characters. The allowable set of alpha-characters is restricted to the
A-Z and a-z set.
- Style
- 2 | 3
| 3.2 | IE3B1
| M | N4B3
- Required? No
- Description:
This attribute is a text string that provides rendering style
information for the current tag.
- Values:
Please see the description of
inline styles for more
information on how to use this attribute and its
possible values.
- Example
- <img SRC="http://www.foo.com/foo.gif" ALIGN="left" ALT="alternate text" HEIGHT=20 WIDTH=30 DYNSRC="http://www.foo.com/foo.avi" START="fileopen" LOOP="infinite"
BORDER=3>
- Parent Model
-
%Anchors% |
%Virtual
Formatting% |
%Physical
Formatting% |
%Block Format
Parent% |
%Multimedia
Parent% |
<Body> |
<Address> |
<Basefont> |
<Heading> |
<Marquee>
Exceptions:
<Pre>
- Content Model
- This tag accepts no content
Tips & Tricks
- The author should ALWAYS provide an ALT tag when using an
IMG tag. This allows the tag to degrade gracefully on browsers that do
not support images or have them turned off.
- If you decide to use any of the Internet Explorer specific IMG
attributes, ALWAYS use an alternate SRC attribute as well to
allow for graceful degradation on browsers that do not support these
attributes (which is every browser but Internet Explorer.)
- The ALIGN attribute has two sets of orthogonal behavior types
bundled together: Floating horizontal alignment and in-line vertical
alignment relative to surrounding text. There really doesn't seem to
be a need to specify both types because in each situation, the other
type of attribute is not necessary.
- Never specify a LOWSRC attribute without specifying a SRC attribute.
- Specifying a BORDER of 0 on an image embedded in a hyperlink may
confuse users who use this attribute to visually identify hyperlinks.
- Try to use the USEMAP attribute in conjunction with the ISMAP
attribute, if possible. ISMAP is more widely supported and this solves
the backward compatibility problem.
- If you use the ISMAP attribute, always remember to include an
alternate navigation method for users that are not using an
image-capable browser.
- If you use a Width or Height attribute alone without the other
attribute, the image will be scaled at the same aspect ratio based
upon the provided single attribute.
- Tip: Always remember that a page high in image content can take
quite a long time to load depending on the power and speed of the
connection, equipment and network load. People can become impatient
and stop downloading in such cases, thus your page will never be read.
Strive to control the physical size and quantity of images in your pages.
- FAQ: What is the
'NATURALSIZEFLAG' attribute that can
sometimes be found in HTML documents?
Quick
Answer: An unnecessary attribute added by the Adobe SiteMill/PageMill
HTML editors. A more in-depth
answer has also been compiled.
Browser Peculiarities
- Internet Explorer and Netscape also seem to support a value
for ALIGN called 'center'. This value gives the same results as
the value of 'middle' which vertically aligns the centerline of
an image to the centerline of the surrounding text. Best bet is
probably still to use 'middle'.
- The Internet Explorer 3.0 online tag reference lists support for
an attribute known as TITLE which is supposed to give 'an
advisory title' to the image. IE3 shows no signs that it
actually supports this.
- Some older browsers may not support the floating capabilities
offered by the ALIGN attribute (such as Mosaic versions below 3.0)
Vertical alignment relative to the line is historically much more
widespread.
- Netscape (even up to recent 4.0 Betas) does not allow the specification
of an external URL in the USEMAP attribute to the IMG tag as per the
specification (only internal anchors can be used.) Internet Explorer
behaves according to the specification.
Boring Copyright Stuff...