Understand Site-Relative versus Document-Relative Web Links - Free Web Hosting Directory

The documentation in the Dreamweaver HTML Layout Editor software package talks about two distinct types of relative links in HTML, but the concepts are applicable to any web page; with or without Dreamweaver. The two types of relative links are:

Site-Relative. The address of the link is relative to the overall site.

Document-Relative The address of the link is relative to the address of the document the link appears in.

It is important to understand that if you are testing web pages and sites on a computer without a web server, site-relative links probably will not work. With that said, here are detailed explanations of site relative links versus document relative links.

Site Relative-Links

In a site-relative link the address always begins with a forward slash -- "/". The forward slash indicates that the address is relative to the web server's notion of the site root.

Let us suppose that your site is located at the web location:

http://www.TotallyNonExistentSite.com

Furthermore, let us now suppose that you want to refer to a document located at:

http://www.TotallyNonExistentSite.com/RedDirectory/FatDirectory/Jokes.html

Then the site-relative address of that document would be:

/RedDirectory/FatDirectory/Jokes.html

and, a link to that document would look like this:

It is important to understand that this link will work from any other document in the website, NO MATTER WHERE IT IS LOCATED! The reason is simple -- site relative links are not relative to the documents they are contained in -- they are relative to the entire website.

Document-Relative Links

Any relative link that is NOT a site-relative link MUST be a document-relative link. Document-relative links are links that are relative to the document that contains them. Here are some examples of document-relative links:

comedy.html -- refers to the file comedy.html in the same folder.

humor/sickjokes.html -- refers to the file sickjokes.html, which is located in the humor folder, relative to the directory of the document it is referenced in.

../MotherInLawJokes.html -- refers to the file MotherInLawJokes in the folder above the directory of the document it is referenced in.

Links to the above three documents would look like this:

Conclusion

When you move a document that contains root-relative links the links will continue to work. On the other hand, the root-relative links which refer to that document may break. In general, for working on small sites, document-relative links are preferred, and they have the additional advantage that they can be tested on a computer that does not host a web server.