Absolute vs. Relative Paths

1. Absolute and Relative Paths
2. Exploring Relative Paths
3. Exploring Absolute Paths

One of the most common things newcomers to Web page creation get confused about is linking to other pages, including CSS files, and referencing images. At the root of the confusion are absolute and relative paths.

Absolute and Relative Paths

An absolute path refers to a file on the Internet using its full URL, e.g. "http://www.uvsc.edu/disted/php/webct/itr/index.php"
A relative path assumes that the file is on the current server, e.g. "php/webct/itr/index.php".

Exploring Relative Paths

Let's look at this in greater detail by examining a hyperlink. We saw hyperlinks in the last lesson, though we didn't really explore how they work. First, we're going to assume that we have a number of folders and files set up for our Web site, such as can be seen here:

If I'm working on the home page, which is "index.html" right at the top, I might write the following hyperlink:

<a href="contact.html">Contact Us</a>

Here we have "contact.html" as the target page I am linking to while "Contact Us" is what the current page displays as the clickable hyperlink. Stop and think: Is this a relative or absolute path?

Answer: relative path. By simply referencing the page's name I am assuming that the "contact.html" file is the exact same folder as the current page. However, if we were to look at the address bar after the "contact.html" page were loaded, it wouldn't just show "contact.html"; it would show the full path, something like: "http://www.yourmomscards.com/contact.html"
Let's say we have a folder called "products" on our Web site: "http://www.yourmomscards.com". Inside the "products" folder we have a file called "lotrtcg.html". The full URL of this page would be "http://www.yourmomscards.com/products/lotrtcg.html".
If I'm working on the home page, "http://www.yourmomscards.com/index.html", how can I use a relative path to link to the "lotrtcg.html" web page? We first have to point into the right folder, then point to the page itself:

<a href="products/lotrtcg.html">Lord of the Rings TCG</a>

Let's say in this "lotrtcg.html" file, we have the following link:

<a href="wowtcg.html">World of Warcraft TCG</a>

If someone clicked that, where do you think it would take them in the site?
It would take them to "http://www.yourmomscards.com/products/wowtcg.html"—assuming that page exists!
Now imagine that you want to link back to the home page of your Web site ("http://www.yourmomscards.com/index.html") from the "wowtcg.html" page. How would you reference that page using relative paths? Well, we have to jump back down out of the "products" folder first, and we do that with "../"

<a href="../index.html">Home</a>

To get more complicated, what if we need to go from "http://www.yourmomscards.com/products/wowtcg.html" to "http://www.yourmomscards.com/events/tournies.html"?

<a href="../events/tournies.html">Upcoming Tournaments</a>

"../" tells the browser to go back a directory, and "events/" directs the browser into the "events" folder before opening the "tournies.html" page.
The "../" is very important in this link because it tells the server to go back a directory, and THEN look for the "events" folder. If you didn't do this, and just used

<a href="events/tournies.html">Upcoming Tournaments</a>

you would have told the browser to try to find "http://www.yourmomscards.com/products/events/tournies.html", which doesn't exist!
By the way, if you needed to go back two directories, you would use "../../" and so on, and so on.

Exploring Absolute Paths

Absolute paths tell the browser precisely where to go. Consider this:

<a href="http://www.fictionals.com/stories/stories.html">Read Stories</a>

It doesn't matter where the browser currently is because you've given them the entire URL, spelling out precisely what Web server, folder, and page to open up.
While this is easier to use and understand, it's not good practice on your own Web site. For one thing, using relative paths allows you to construct your site offline and fully test it before uploading it. If you were to use absolute paths you would have to change your code before uploading it in order to get it to work. This would also be the case if you ever had to move your site or if you changed domain names.