Like HowStuffWorks on Facebook!

How Web Pages Work

Labeling Images

Another useful, but not mandatory, tag that you can add to your image tag is "alt." This tag gives your image a label, appearing when the user passes the mouse over the graphic. It also appears before the image appears as your page is loading in the browser, holding the user's interest while the graphic is coming up. You can insert any message you want using the "alt" tag.

Example: <img src="hswlogo.jpg" alt="HSW Company Information">

If Your Images Don't Work...

We get a fair amount of e-mail from people having trouble adding images to their pages. When GIFs and JPGs don't work, they usually show up as a small red X.

When you see this problem on your pages, it means one thing: you have not typed in the correct file name for the image. Here are some steps you can take to correct the problem:

  • Start by simplifying the process. Put the HTML file and the image file in the same directory. Rename the image file to xyz.gif (or xyz.jpg). Create a tag that says in your HTML page. Display the page in your browser. If you still see the red X instead of the image, then...
  • Check to make sure the renamed file is really named xyz.gif. On a UNIX machine, case matters, so make sure everything that should be uppercase is uppercase, and everything that should be lowercase is lowercase. The name Xyz.gif is entirely different from xyz.gif to a UNIX machine.
  • On a Windows machine, the operating system will sometimes add a suffix to the file name without telling you. For example, you might see xyz.gif in the Explorer, but Windows may have named the file xyz.gif.gif. The easiest way to see if this has happened is to use the dir command in the MS-DOS prompt, so that you are seeing the real file names. If Windows is in fact adding suffixes, you can simply turn off that behavior using the options dialog in the explorer.

We'll find out how to align your images in the next section.