HTML Images

Images are an important visual aspect of most webpages, but how do they get there? Since I'm not a great photographer, I'll skip over the part about taking the pictures and transferring them to your computer, but I will discuss the HTML necessary to display an image on your webpage.

The image tag <img /> is an empty element, or an element without a closing tag. It uses the source attribute "src" to identify an image, and the path to the image.

<img src="http://www.phpforkids.com/images/animals/grasshopper.gif" />


And hey, look, it works!

Keep an eye on the file extension of the image, because there are several types of images that can be used, such as .jpg, .gif and .png but confusing them will keep the image from loading properly. Also, the extensions are case-sensitive.

But isn't there an easier way to do it, without typing all of that in every time? I'm glad you asked, because in fact, there is! Our example used a full URL, which was not necessary, because the image was located on the same server as the webpage accessing the image. The following are alternatives to using the full URL:

<img src="grasshopper.gif" />
This path will work if the image is in the same directory, or folder, as your HTML file.

<img src="../grasshopper.gif" />
This path leads to an image that is in the directory, or folder above/before your HTML file.

<img src="../images/grasshopper.gif" />
This path leads to an image that is in an "images" directory one directory above/before your HTML file.

<img src="/images/animals/grasshopper.gif" />
This path begins at the main directory of your website and points the way through several folders no matter where the HTML file is on the website.



HTML Image Attributes

Using the "alt" attribute, you can add a line of text to be displayed in case the browser cannot find or display the image properly. This is useful if, for example, the visitor is using a text-only browser, or has images disabled.

The height and width attributes are useful for similar reasons. You can add these attributes to tell the browser what size of a block to reserve for the image so that the browser does not have to move everything else on the page around when the image finally loads.

<img src="grasshopper.gif" alt="Grasshopper" height="145" width="145" />

HTML attributes can vertically align an image to the left, right, or center so that text can wrap around the image, although it is better to use CSS for the job.

An example of this is the image to the left, which uses the "align" attribute with a value of "left" to produce this result.

<img src="grasshopper.gif" align="left" />

Happy imaging!