HTML Basics
Stanford University Libraries & Academic Information Resources

Inline images

<Img> causes an "inline image" to be inserted into the output. The image will be retrieved and rendered as if it were just another part of the text. Inline images can occur within headings, or paragraphs, almost anywhere in fact, except body (in other words, you can have a 'free floating' <img> tag--it must be contained within some other element.)

Like <hr>, this is an empty element. That is, there must be no end-tag. You will sometimes see <hr> used with an end-tag (e.g as a container around a caption), but this is obsolete usage.

Attributes

<Img> has 1 required attributes src as well as 3 optional attributes.

src

The src attribute is used to specify the URL of the image (i.e. the address or filename the browser uses to retrieve the image file), e.g.

  <img src="http://planet-earth.bogus.us/icons/secret.pictures.gif">
  <img src="grandchild.gif">

alt

alt is used to provide an text alternative to the image for readers whose browsers do not support graphics (or for visually impaired readers using alternative display devices). Although not required, the use of the alt attribute is nearly always appropriate and is strongly recommended. The only exception might be cases where the image is strictly decorative or of generic character. In this case the default text chosen by the browser (typically something like "[IMAGE]" may be adequate.

align

align can take one of three values:

• top
• middle
• bottom

and is used to indicate how the browser should align the image with the adjacent text.
bottom: align the bottom of the image with the bottom of text
middle: align the middle of the image with the middle of text
top: align the top of the image with the top of text.

Lets align an image with the Top of this text and then Middle and finally the Bottom , just to see what happens.

ismap

ismap marks the image as an active image map. This allows the user to click the mouse over the image and have different regions of the image cause different actions. In order for this attribute to have any effect, some configuration must be done at the server. On some servers setting up an imagemap is quite simple, on others the process is more involved and may involve some programming. Merely including the ismap attribute in the <img> in your document will not magically make it a 'clickable map'.

Example

    <h3><img alt =" [Angel Fractal] " src="angels.gif">Lovely
    Fractals</h3>
    <p>Watch out when you insert an image in a line of text. Because the
    image is a fixed height, it will do some <img
    src="smalross.gif" align="middle">odd things to line spacing.<br>
    Future versions of HTML may support options for 'flowing' text around
    inline images</p>

which is rendered

Lovely Fractals

Watch out when you insert an image in a line of text. Because the image is a fixed height, it will do some odd things to line spacing.
Future versions of HTML may support options for 'flowing' text around inline images

Inline images or hypterext link?

Images can also be retrieved using by means of a hypertext link using the <a> tag. The key difference between an inline image and an image retrieved with the <a> tag is that an inline image requires no action on the part of the reader; it is retrieved with the page just as if it were part of the text. With the <a> tag, the reader has to make a special action (e.g. clicking on a button) to retrieve the image.

In fact, the two methods are often used in tandem. For example, to use graphics as buttons:

Press the button to meet the muses of this guide

or to use a thumbnail (reduced size) version of a larger image as a button. When the button is pushed, the larger image is retrieved:

Limitations

Format

Although they are not part of the HTML specification per se, there are a few practical considerations that most be dealt with in order to use inline images.

Most browsers can only handle inline images that are in GIF format. Some can also handle images in JPEG format, but you can't rely on this. If you want to use an image in a format other than GIF, it is prudent to use a <a> tag instead.

Problems spacing images in toolbars

Some browsers insert a space between adjacent elements if there is any whitespace between the end-tag of one element and the start-tag of the other, which can be annoying if you're trying to put together a tool bar or a compound image. Thus

    <p><img src="button1.gif" alt='Button1">
    <img src="button1.gif" alt='Button1"></p>

may be rendered as

    [Button1] [Button2]

rather than

    [Button1][Button2]

If you really want to ensure that two images are contiguous, the only way I've found to accomplish it is do something like

    <p><img src="button1.gif" alt='Button1"><img
    src="button1.gif" alt='Button1"></p>

I believe that according to the specification, this shouldn't be necessary, and that the browsers are misbehaving, but I may well be wrong.