Alternatively referred to as the file path and full path, the absolute path contains the root directory and all other subdirectories that contain a file or folder. Below are some examples of absolute and relative paths.
Windows absolute path
Windows non absolute path (relative path)
In the above example, the absolute path contains the full path to the file and not just the file as seen in the non absolute path.
Linux absolute path
Linux non absolute path (relative path)
In this example, the absolute path contains the full path to the cgi-bin directory on that computer. Since most users do not want to see the full absolute path to their personal directory the relative path is shown. Use the pwd command to see the absolute path.
Internet URL absolute path
Internet URL non absolute path (relative path)
Finally, in this last example the Internet absolute path is the domain and the web page on that domain. Web developers creating links to other pages can use a relative path if the file their linking from is in the same directory. See our URL definition for a full explanation of all the parts that make a URL.
How to link to an absolute and relative path file?
When creating a link using the A HREF, IMG, or any other tag that points to a file it can be confusing on how to make the path or URL. Creating a link to an absolute path is easy since you are pointing to the Internet URL of the file. For example, if we wanted to link to the Computer Hope logo and the URL to that logo is "http://www.computerhope.com/logo.gif" the absolute path would be this URL as shown below.
<a href="http://www.computerhope.com/logo.gif"><img src="http://www.computerhope.com/logo.gif"></a>
However, to link to that same image file using a relative path you must follow the steps below.
- The file must exist on the same server as the HTML file. So, if we were linking to "logo.gif" that file must exist on the server or locally. You could also substitute the name of this file for any other file on your server.
- The path to the file must be relative to the directory of the HTML file. So, if we wanted to link to the "logo.gif" file on this page, we see the local path as "/jargon/a/absolutepath.htm" which are the directories "jargon" and "a" that contain this page. Since the "logo.gif" is in the root directory, we would need to go back two directories to get to the file.
- Now that we know the path to the file is back two directories we know the path is "../../logo.gif" the "../" tells the browser to go back one directory. Since the file is back two directories this needs to be done twice. The completed example is shown below.
<a href="../../logo.gif"><img src="../../logo.gif"></a>
For those who are more visual or need a visual example, everything explained above is also shown in the picture below.
Tip: If you needed to go into another folder after going back two directory it is added after "../" For example, assume "logo.gif" was in the "issues" folder, which was in the root directory. We would still need to go back two directories to get to the root directory but then would need to move into the issues folder. So, the path to the file in this example would be "../../issues/logo.gif"