Absolute Vs. Relative

Local and Remote? Directories and FTP? Where does it all end? Simply stated, there's really no end to it. The topics are endless. But we're here to cover the basics, now aren't we?

Absolute and Relative links is the current topic of discussion. First let's think about links in general. A link is the path you follow to get to a file on the internet. It could be a path to an image, or to a web page, or to a video file... or anything else you might want to put on the internet. And of course, there are different kinds of links.

Let's start with Absolute Links. An absolute link is the entire path to whatever it is you're trying to reach. An absolute link starts with http:// (or C:/ if the file is on your local computer) and ends with the name of the file. For example, the absolute link to this web page is:

http://www.csit.parkland.edu/~nblight/help101/absrel/absrel.html

You should be able to see it up in the address bar of whatever browser you're using to view this page:

The best time to use absolute links in your webpage is for when you want to link to something that is not a part of your site. For example, if you wanted to provide your visitors with a hyperlink to Yahoo.com, your HTML code would have to use the absolute link: http://www.yahoo.com. Think of an absolute link as being the full name of any given file on the internet.

"That's nice," you're thinking, "But what's a relative link, then?" That's a very good question. What on earth is a relative link? A Relative Link is the path to a file relative to where you are currently located in the directory structure. Is that too confusing for you? How about I draw you a picture:

Let's say that we want to create a hyperlink in the HTML document named "index.html" in the "Folder" directory to the document named "csc121.html" that resides in the "csc121" directory.

One way to do it would be to use the absolute path to link to the file from index.html:

But why type all that out when you could just use a relative link? Remeber that a relative link is the path to the file relative to where you are in the directory structure. So to link from index.html to csc121.html, you would use the code:

While veiwing index.html, you are currently in the Folder directory. In order to get to csc121.html, you must move from the Folder directory into the csc121 directory. So think of the Folder directory as your starting point. You move into the csc121 directory, and your path becomes "csc121/". Once you are in csc121, you can move to the csc121.html file, and you path thin becomes "csc121/csc121.html".

Relative Links are used to navigate through your web site. You cannot use a relative link to go to another site, like Yahoo.com, but you can use a relative link to go from one page in your website to another. Relative links save you time on typing, and they are also useful if you ever have to move your web page to a different server.