Directory Tree

MORE DOCUMENT-RELATIVE EXAMPLES

There are three ways Document-Relative pathways are designated- the method you use will depend on the location of the source and destination pages in relation to each other. We will use the example on the right and create hyperlinks from the page called sourcepage.html to other pages in the site "mysite.com", whose home, or root, directory is "public_html".
"sourcepage.html" resides in the folder named "article1" at "mysties.com/zarticles/article1/sourcepage.html"

(1) If the destination page is in the same directory as the source page
All you need to specify is the source file name:

<a href="introCh1.html">Go To Intro to Chapter 1</a>

(2) If the destination page is in a folder inside the source page's folder
Specify the folder name and then the file name:

<a href="chapter1/page1.html">Go To Chapter 1</a>

(3) If the destination page is in a folder outside the source page's folder
Use the special instruction ../ which signifies "one directory higher".

The following link means "Go Up one directory level (in this case- to the"zarticles" folder), then go to a folder called article2, then to a file called introCh2.html":

<a href="../article2/introCh2.html">Go To Intro to Chapter 2 </a>

You can repeat the ../ to make the link more than one level higher, for example, "Go up two levels, to a file called index.html" (which in this case just happens to be in the Root Directory of the Site [public_html])::

<a href="../../index.html">Go To The Home Page</a>

Important Note: For relative links to work, you must keep the file structure intact. For example, if you moved the sourcepage.html file down into the chapter1 folder, the relative links would no longer work. In this case you would need to add another ../ to point the links to the correct level. For example:

<a href="../../../index.html">Go To The Home Page</a>

(4) Here's how url(path/to/lbimages) would look in lightbox.css

      url(../images/lbimages/nextlabel.gif)

(5) Here's how path to loading.gif would look in lightbox.js

      fileLoadingImage: '../images/lbimages/loading.gif',

(6) Here's how LINK Tag would look in sourcepage.html

      <link rel="stylesheet" href="../../css/lightbox.css" type="text/css" media="screen" />

(7) Here's how SCRIPT Tag path would look in sourcepage.html

      <script type="text/javascript" src="../../js/prototype.js"></script>

Directory Tree

MORE ROOT-RELATIVE EXAMPLES

(1-3) Here are how the paths to all those same files appear using Root-Relative paths...

     <a href="/zarticles/article1/introCh1.html">Go To Intro to Chapter 1</a>

     <a href="/zarticles/article2/introCh2.html">Go To Intro to Chapter 2</a>

     <a href="/index.html">Go To The Home Page</a>

(4) Here's how url(path/to/lbimages) would look in lightbox.css

      url(/images/lbimages/nextlabel.gif)

(5) Here's how path to loading.gif would look in lightbox.js

      fileLoadingImage: '/images/lbimages/loading.gif',

(6) Here's how LINK Tag would look in sourcepage.html

      <link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />

(7) Here's how SCRIPT Tag path would look in sourcepage.html

      <script type="text/javascript" src="/js/prototype.js"></script>

This is "set it and forget it" type of linking. You can create a link and use it anywhere on your site without needing to edit it. You can move a page without having to edit/update the links. You can test your site locally as well as live with consistent behavior.

NOTE: Pros and Cons of Using Absolute Paths for linking to files within the same domain,
1) If you move your domain or your pages, links will have to be edited (sitewide).
2) Relative URLs carry the same effectiveness as absolute URLs, and vice-versa. There is no difference regarding their impact with SEO;
HOWEVER, the general consensus (2011) suggests that absolute URLs are the accepted practice for SEO in place of relative links primarily on the basis that it is better to be safe than sorry...
Relative URLs run the risk of becoming incomplete links:
- when employing code that may compromise the integrity of a link (where the consistent performance of a link may come into question, say, due to some sort of scripting you are using, etc), you may need to employ Absolute URLs
- Site Scraping is one reason some choose to stick with Absolute Linking ..."at least there is a link back to my site if my site gets scraped"...
- Google and other Search Engine Crawlers can experience problems...

***Personally I find using Absolute Linking an unnecessary pain and nuisance, and only employ its use where I find it necessary.
If you do opt for a Root-Relative URL setup, then you should consider implementing a Base tag into the page headers of your website. For example:
<base href=”http://www.mydomain.com” />
This can help safeguard against any of the potential worries mentioned above while allowing you relative-linking freedom.

To learn more about that, point your search engine at: html base tag

KEEP IN MIND: There are some cases where it may be desirable or necessary to use Absolute Paths... for instance, when feeding certain types of pages to certain mobile devices it may become necessary to use Absolute Paths to ensure consistent access to the pages at your domain. I.e., it can happen that in some cases Relative Linking will lose the 'implied' domain.com root reference, and the link(s) will not lead back to your website.