Next Previous Contents HTML 4.0 compliance checked by http://validator.w3.org

13.0 Images and Objects

Images are one of the most popular parts of HTML. However, some people use a text-only user agent (web browser), and some people (e.g. blind) use voice reproduction. Hence it's important to include the textual descriptions supported by the image tags, and to arrange the document so a blind or non-graphic reader can accomplish what you intended with your document.

After this paragraph there is a large GIF image which is not floated because there would be no room for text at the right. It is loaded with the IMG tag. It has an alt= attribute for non-graphic UA's to show. It immediately follows a BR at the end of this sentence.
Map of Gondolin, with geological structures and drainage lines.

Images are inline material. However, they are often "floated" out of line by means of the (deprecated) ALIGN= attribute. There should be room for text to the right of the image, in that case. The next image, at the beginning of a paragraph, is smaller than the one above and it's floated left. In browsers with runaround capability, text should run around the image.

Picture of winged message, used in forms test. This image is a picture of a winged message, used in the forms test. This text should be arranged to the right of the image. If the text is long enough to clear the bottom, it will continue with the full width of the canvas. Runarounds are very nice looking with suitable images, but one pitfall is that if the canvas is too narrow for both the image and the text, some browsers are too dumb to put the text below the image; they will put one word per line at the right of the image, hanging off the edge of the canvas.

The image following this paragraph is not available from the server. There should be some reasonable alternative content. This IMG tag is provided with both ALT= alternate text and a LONGDESC, which you can preview by clicking on the link. Here it is, after a <BR>:
Alternate text for nonexistent image

The next image is loaded with an OBJECT tag. There is alternate text beginning Map of... between its start and end tags; this will be shown by a UA that does not do graphics, or doesn't know about object tags, or if the server refuses to deliver the image. There is no ALIGN= attribute. The image is large and may not fit in the window, so scrollbars should be provided by the browser. The object follows this <BR>:
Map of the batholith which Night and Simba climbed in Chapter 16.

At the end of this paragraph is actually an object of HTML type, included with the OBJECT tag. You see Test of an included... if your browser doesn't do object tags.
Test of an included HTML object; this text should not be shown.

The next image, loaded with the OBJECT tag, doesn't exist. There is no <BR> tag here to illustrate that objects are inline. You should see the object's alternative text instead, starting here: Alternative text for nonexistent image loaded as an OBJECT. It's inline with the material preceeding, but arbitrary HTML, including block level, may also appear in the alternative text. The image goes with this blockquote:
And I bend double, hands and feet on the ground just like Lutra lutra, the Terran river otter. With my hand I sweep two large chunks of rock over the edge and I walk out on the narrow shelf.

The next construct has two nested OBJECTs. The outer one is the same nonexistent image, and its alternative material is the flying message as an object, which is what should be visible. That also has alternative text, which should not be shown.
Alternative text for inner object, which should not be shown.

The following image-type object exists but has a mime type which the browser is very unlikely to be able to handle. What will the browser do with it?
Alternative text for file 130-bizarre.ief, which the browser is supposed to be unable to display.

A common application of the OBJECT tag (and the deprecated APPLET tag, sect. 13.4) is to load a program from the server and to cause it to be executed. This feature is not tested here. The PARAM element (sect. 13.2), also not tested, passes parameters to the applet.

Next comes an IMG tag that refers to an imagemap. Click on either of the two areas, or use tab and enter to select one, or press the hotkeys `1' or `2' to follow the respective link. The word ``imagemap'' is also a ``comefrom'', an <A> element with the name= attribute. The pages referred to by the imagemap return to that anchor; see if your browser honors the name= attribute in the return (or goes back to the beginning of this page).
Imagemap with two links

Next is an OBJECT tag that refers to the same imagemap, except without the hotkeys. Click on either of the two areas, or use tab and enter to select one.
Image map with two areas. They lead to:
the area one document, and
the area two document.

You see the two links if your browser doesn't do OBJECT imagemaps.

Image map area one Image map area two Image map area one Image map area two

Here is a toplevel link to a mime type of TeX (application/x-tex) which the web server is likely to recognize as valid but which the browser is not likely to be able to display. If you click on the link the browser should do something semi-reasonable with it, such as letting you download it.

Next Previous Contents