A relative URL is a path that locates one file relative to another. The following img element uses only the file name of the graphic. Hence the graphic needs to be in the same folder as this HTML file.

The following graphic has a more elaborate relative URL that directs the Web browser to look inside a subfolder to find the graphic.

Most Web servers have a Case Sensitive file system. That means src="images/homer.gif" WILL not locate the image if the folder is named Images, or the file is named Homer.gif, for example. However, the file systems on both Macs and Windows are not case sensitive. That means if you have case mis-matches locally while building your site, the images will still show up on your page locally. But once transferred to the server, they will not show up in your page.

You can put images in your page using Absolute URLs like the following. However, that has major disadvantages.

First, if the Absolute URL points to somebody else's Web site, like linking to a Google image, you never know for how long the Absolute URL will be accurate. They might delete it or rename the image file. Then the image would suddenly dissapear from your page.

Second, it's not portable. My Domain Name is in the above absolute URL. Suppose I finally move my course site to www.knuckles.com (without the c). Then none of my source URL's would be accurate any more if I embedded images using Absolute URLs. Using Relative URLs internally in a Web site makes it completely portable, meaning the whole site can be moved and the relative URLs are still accurate.