Did you find this useful?
Socialize it today.

Absolute and Relative Paths

Wednesday, February 15, 2012

In the previous article, we discussed how to create links in your pages. Before you begin to insert links into your documents, it is important to understand how to create links that point to internal and external pages. There are basically two ways to address these links. You are going to either reference these links by absolute or relative paths.

Absolute Paths

Absolute paths are easy to use and understand. These links refer to the very specific location, including the domain name. The absolute path to another location is referred to as the URL. For example, the absolute path to this website's home page is: http://www.itgeared.com/. You always want to specify the absolute path when you are linking to a web page that is on another website. You should not use absolute paths when linking to pages within your own website. If you do specify absolute paths, you will have a lot of work ahead of you in the event that you change your domain name. In the event that you change your domain name, it would require that you go back and edit all of your internal links. Therefore, for your internal links, use relative paths instead.

Relative Paths

Relative paths are very useful when you want to create links between your pages within the same website. Unlike absolute paths, relative paths do not include the domain name. The advantage to using relative paths is that you can change your domain name, and your links will continue to work without having to modify them. Of course, if you move files and folders within your site, you will have to update relative paths as well. Please refer to the following diagram.


Access a resource from the root directory

If you want to reference a resource from the root directory, your relative path will begin with a forward slash "/" followed by the location of the resource. For example, from anywhere in your document, you can reference the img1.jpg file by referring to it as so: href="/images/img1.jpg".

Access a resource in a sub-directory

If you want to create a link to the submit.htm page from the index.htm page, you can do so using this relative path: href="forms/submit.htm". Notice that a forward slash "/" is not included before the directory "forms". If you do not include a forward slash, the browser will refer to the resource in a sub-directory from your current location.

Access a resource in another directory

There may be instances where you do not necessarily want to reference the location from the root, and the resource is not in a sub-directory. Let's say you are currently developing the submit.htm page in the "forms" directory and you want to link to the img1.jpg file. You can use a relative link as follows: href="../images/img1.jpg". Notice that this time, we added ".." before the first forward slash. This tells the browser to go "up" one directory, then move down into the "images" directory to access img1.jpg.

Access a resource in the same directory

Finally, if you want to reference another resource that is in the same directory as the source file, you can simply reference the path as follows: href="filename.ext". If you do not specify any information before the filename, the browser will assume that the resource is located in the same directory.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.

Recommended Books & Training Resources

Creating Web Pages Simplified HTML CSS and JavaScript Editor HTML CSS: The Complete Reference