(thing) by klinkon Thu Mar 29 2001 at 10:01:12
The <img> tag is the HTML tag which allows you to include inline images in any web document. There is no ending tag for <img> (ie. it does not end with an </img>), and images must be placed in the <body> of the document. The image tag can not be used in nodes on everything2. It has a number of different attributes which can be included in the tag. These include:

src="URL" (Required)
The source of the image to be placed into the document. The actual image can be in a variety of different image formats, the most common including GIF, JPEG, and more recently, PNG. The source of the image can be defined in a number of different ways. The attribute accepts values in the form of either complete, partial or relative URLs for the image.

alt="text" (Optional)
This is the alternative text for the inline image. While loading the image, the browser will display this text in place of the image, and when finished loading the image, will replace the text with the new image. Also, when the user hovers their mouse cursor over the image, a tool-tip displaying the alternative text will display. This text can help in non-graphical environments, and also helps surfers use the document, by letting them know what exactly they are loading.

height="value", width="value" (Optional)
Specifies the height and width of the image, in pixels. When the browser is downloading the image, it will insert a placeholder into the web document with these dimensions. If the downloaded image is smaller or larger than the specified sizes, then the image will be scaled to fit. By using these tags, you can speed up loading of your web pages.

align="type" (Optional)
Specifies a method that the image will be aligned with the rest of the document. Valid types include:
  • ALIGN=left - image will float the image to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image.
  • ALIGN=right - will align the image aligns with the right margin, and the text wraps around the left.
  • ALIGN=top - aligns itself with the top of the tallest item in the line.
  • ALIGN=texttop - aligns itself with the top of the tallest text in the line (this is usually but not always the same as ALIGN=top).
  • ALIGN=middle - aligns the baseline of the current line with the middle of the image.
  • ALIGN=absmiddle - aligns the middle of the current line with the middle of the image.
  • ALIGN=baseline - aligns the bottom of the image with the baseline of the current line.
  • ALIGN=bottom - aligns the bottom of the image with the baseline of the current line. (Essentially, this is the same as ALIGN=baseline)
  • ALIGN=absbottom - aligns the bottom of the image with the bottom of the current line.

border="value" (Optional)
This specifies the size of a border around the image, in pixels. If the image is in a hyperlink, then the border colour will be the colour of the links; if not, it will be the colour of the normal text. The most common use of this attribute is to remove the border around hyperlinked images (which is the default), by setting its border to 0.

A few attributes have been implemented recently, and are therefore only avaliable in recent browsers. These new attributes include:

title="text" (Optional)
This attribute is for informational purposes. If present, the text specified will appear as a "tool-tip" when the user hovers their mouse above the image. The tooltip text for title will override any alternative text for the tooltip in alt.

style="value", class="value" (Optional)
Both of these values are related to Cascading Style Sheets (CSS), which is beyond the scope of this document.

name="value", id="value" (Optional)
The name attribute can set a specific name to the image object, which can later be accessed using scripting methods; and the id attribute is almost the same, but not identical, as more attributes to the image object can be accessed using the id attribute.

It is important to note that this is not a fully comprehensive list of all the attributes and information available for the <img> tag, it is merely a guide. For a more complete guide to images, please visit the World Wide Web Consortium (http://www.w3c.org), which sets the standards for HTML.

If you have any comments relating to this document, or you have any suggestions, or queries, please feel free to message me (klinkon).

I like it!