HTML and CSS Reference
The most important attribute of the <img> tag is src , which is the URL of the image you
want to include. Paths to images are specified in the same way as the paths in the href
attribute of links. So, to point to a GIF file named image.gif in the same directory as the
HTML document, you can use the following XHTML tag:
< img src=“image.gif” / >
For an image file one directory up from the current directory, use this XHTML tag:
< img src=“../image.gif” / >
And so on, using the same rules as for page names in the href part of the <a> tag.
You can also point to images on remote servers from the src attribute of an <img> tag,
just as you can from the href attribute of a link. If you want to include the image exam-
ple.gif from www.example.com on your web page, you could use the following tag:
< img src=“http://www.example.com/example.gif” / >
Just because you can use images stored on other servers for your
own web pages doesn't mean that you should. A lot of legal, ethi-
cal, and technical issues are involved with using images on other
sites. I discuss them later in this lesson.
Adding Alternative Text to Images
Images can turn a simple text-only web page into a glorious visual feast. But what hap-
pens if someone is reading your web page using a text-only browser? What if she has
image loading turned off so that all your carefully crafted graphics appear as generic
icons? All of a sudden, that visual feast doesn't look quite as glorious.
There's a simple solution to this problem. By using the alt attribute of the <img> tag,
you can substitute something meaningful in place of the image on browsers that cannot
In text-only browsers, such as Lynx, graphics that are specified using the <img> tag in the
original file usually are displayed as the word IMAGE with square brackets around it, like
this: [IMAGE] . If the image itself is a link to something else, that link is preserved.
The alt attribute in the <img> tag provides a more meaningful text alternative to the
blank [IMAGE] for your visitors who are using text-only web browsers or who have
graphics turned off on their browsers. The alt attribute contains a string with the text
you want to substitute for the graphic:
<img src=“myimage.gif” alt=“[a picture of a cat]” />