CIT 040: Absolute and Relative URLs

There are two different ways to specify URLs in an HTML document. This page explains the difference between them.

Absolute URLs

street/house tree Imagine your file hierarchy as a map, where folders represents streets and files represent houses. An absolute URL is like giving directions starting at the very outside of the map and working inwards. The directions for getting to Maria’s house in an absolute fashion would be “Start at Main street, then go to Oak street, then to Crestview Drive, and there is Maria’s house.” In terms of URLs, that would be http:///main.com/oak/crestview/maria.html.

On the web, the / (slash) separates parts of a URL. You never use a backslash \ to separate the parts of a URL.

The absolute URL to get to Frank’s house is “Start at Main Street, go to Cedar Street, and there is Frank’s house.” (http:///main.com/cedar/frank.html).

If you making a link to someone else’s web site, you must use an absolute URL, because you are coming in to that site from “outside.”

Relative URLs

When you are creating links from one part of your web site to another part of your site, you are not an outsider. Instead of using absolute URLs, you should always use relative URLs. Here is how relative URLs work in terms of the street map analogy.

Let’s say you were on Crestview Drive in front of Maria’s house and someone asked you how to get to Vinh’s house. You wouldn’t answer, “Start at Main Street, then go to Oak Street, then go to Crestview Drive...” You wouldn’t do that because you’re already on the correct street. You would just say “it’s next door.” That is a relative URL—starting from where you are right now, how do you get to the destination? Because you are already in directory crestview, the relative filename for file vinh.html is just that: vinh.html, because it is in your current directory.

If you were on Cedar Street and someone asked you how to get to Tim’s house, you would tell them to go to Rainbow Drive, and there’s Tim’s house. In HTML terms, the relative URL is rainbow/tim.html. Do not begin a relative URL with a slash; if you do, the server will interpret it as meaning “the top level of the entire web site.”

If you were on Oak Street and someone asked you how to get to Roger’s house on High Street, you would answer with a relative path: Go to Crestview Drive, and from there to High Street. As a relative URL, that’s crestview/high/roger.html.

Now comes a tricky one. You’re on Sunset Drive (in the diagram, that is the vertical dotted line beneath the folder labeled sunset), and someone asks you how to get to Frank’s house. You have to say: “Go back up one street (that puts you on Cedar street, the vertical dotted line under the cedar folder); that’s where you will find Frank’s house.” Whenever you tell someone to go back up one level in the file hierarchy, you use .. to symbolize the parent directory. In HTML terms, the relative URL is ../frank.html

Common Mistakes

The relative URL is not cedar/frank.html. If you are on Sunset Drive, you can’t go directly to Cedar Street; it’s not one of your sub-directories.

Using ../cedar/frank.html is also incorrect. That would mean “back up one level (which puts you on Cedar street) and then go to Cedar street (but you can’t; inside the cedar folder there is no other folder named cedar!)

If you are on Rainbow Drive and want to go to Cathy’s house, you have to back up to Cedar Street, and from there back up to Main Street. Once there, you have a straight shot to Oak Street and Cathy’s house. Thus, the relative URL is ../../oak/cathy.html


Experiment with Relative URLs

At the left is the file hierarchy of the fictional http://example.com web site.

At the right, you can select a directory to start in by using the first dropdown box. Then select a file to navigate to by using the second dropdown. When you click the “Describe Path” button, you will see how to form a relative path for to access the file from the given directory.

tree list of files

Start in directory:

Access file:


Now, You Try It

In this section, you will be shown a starting directory and a destination. Enter the correct relative path for accessing the destination file or directory.

tree list of files

Presume you are in directory   and want to access  

Enter the correct relative path: