30.9.12

Absolute and Relative Paths

Absolute and Relative Paths


By , About.com Guide

Writing URLs

When you're creating links to documents and images on the web, you need to think about how you're going to link to them. There are two standard ways to create links:
  • absolute paths
  • relative paths

Absolute Path URLs

Absolute paths are called that because they refer to the very specific location, including the domain name. The absolute path to a web element is also often referred to as the URL. For example, the absolute path to this web page is:
http://webdesign.about.com/od/ beginningtutorials/a/aa040502a.htm
You typically use the absolute path with the domain to point to Web elements that are on another domain than your own. For example, if I want to link to the Graphics Software Guide’s site — I need to include the domain in the URL: http://graphicssoft.about.com/. So a link to her Photoshop review would look like this:
<a href="http://graphicssoft.about.com/od/productreviews/gr/Photoshop.htm"> Review of Photoshop</a>
If you’re referring to a web element that is on the same domain that you’re on, you don’t need to use the domain name in the path of your link. Simply leave off the domain, but be sure to include the first slash (/) after the domain name.
For example, my article “How to Create a Web Page with HTML” has the URL:
http://webdesign.about.com/od/beginningtutorials/ss/aasspagehtml1.htm
If I were to link to this URL from another page on my site, I could link to it in this way:
<a href="http://webdesign.about.com/od/beginningtutorials/ss/aasspagehtml1.htm">How to Create a Web Page with HTML</a>
It is a good idea to use absolute paths, without the domain name, on most websites. This format insures that the link or image will be usable no matter where you place the page. This may seem like a silly reason to use longer links, but if you share code across multiple pages and directories on your site, using absolute paths will speed up your maintenance.

Relative Path URLs

Relative paths change depending upon the page the links are on. There are several rules to creating a link using the relative path:
  • links in the same directory as the current page have no path information listed
    filename
  • sub-directories are listed without any preceding slashes
    weekly/filename
  • links up one directory are listed as
    ../filename
How to determine the relative path:
  1. First define the URL of the page you are editing. In the case of this article, that would be http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm
  2. Then look at the directory path for the page. For this article, that is /od/beginningtutorials/a/
  3. Get the URL of the page you want to link to. For this example that would be the “How to Create a Web Page with HTML” article: http://webdesign.about.com/od/beginningtutorials/ss/aasspagehtml1.htm
  4. And look at the directory path for that page: /od/beginningtutorials/ss/
  5. Compare the two paths, to determine how to link to it. From this article I would need to step up one directory from the /a/ directory and then go back down to the /ss/ directory using the code ../ss/aasspagehtml1.htm.
  6. Write the link: <a href="../ss/aasspagehtml1.htm">How to Create a Web Page with HTML</a>
Current Web Design/HTML Articles
Posted by at