IMG (In-line Images) Element

The IMG element allows an image file to be placed in an HTML document (the image should be in GIF or JPEG format, as these are the two graphic types supported by most current graphical browsers) to show alongside the text of the document, as opposed to having hypertext links that retrieve and display images in a separate window or application.

Images can be included within a hypertext anchor: thus you can make an image that behaves as a button linked to other documents or resources. An example is given at the bottom of this document. The IMG element is an empty tag, meaning there is no closing </IMG>.

A basic example is <IMG SRC="graphics/ziplink.gif">, which gives us:

Text following the image is placed on the same line.

You can force text to the next line (say with the <p> tag, as was done with this sentence).

ALIGN Attribute

The default alignment for an in-line image is to place the bottom of the image on the baseline of the line it rests on (as seen with the above example). The ALIGN attribute can be used to change the alignment of the image, giving some control in how the image aligns with the text. Here are some examples:

<IMG SRC="graphics/ziplink.gif" ALIGN="top">

<IMG SRC="graphics/ziplink.gif" ALIGN="middle">

<IMG SRC="graphics/ziplink.gif" ALIGN="bottom">

Here's how the images appear on the same line, using the three ALIGN attributes above (alignment may not match up depending on your browser):

Top: Middle: Bottom:

John Van Essen of the University of Minnesota has assembled an image alignment test page. Check out: http://www.umn.edu/nlhome/m266/vanes002/imgtest/.

ALIGN="right"

<IMG SRC="graphics/ziplink.gif" ALT="[Test image]" ALIGN="right">

Here's some text related to the test image. Not very interesting, but shows how text can wrap around an image given the ALIGN=right alignment attribute. Changing the alignment attribute to ALIGN=left would (obviously) place the image against the left side, and allow text to wrap around it to the right (most current browsers support these values for ALIGN, but not all).

Also note the use of the ALT attribute here, which gives a text alternative to the image for text-based browsers. This can be useful when an image also acts as a hypertext link (as shown next).

Image as Hypertext Anchor

<a href="images.html"><IMG SRC="graphics/ziplink.gif" ALT="Test link"></a>

This image is also a hypertext link (in this case, back to this document). For more information on links, see the previous Hypertext Links page.

---

Back to Links

Index

On to Document Color

Back to the Ziplink 101 page       ©2000 ZipLink. All Rights Reserved.