Understand Site-Relative versus Document-Relative Web Links

The documentation in the Dreamweaver HTMLRelative Address of Joke File
Layout Editor software package talks about twoIt is important to understand that this link will work from
distinct types of relative links in HTML, but theany other document in the website, NO MATTER
concepts are applicable to any web page; with orWHERE IT IS LOCATED! The reason is simple -- site
without Dreamweaver. The two types of relative linksrelative links are not relative to the documents they
are:are contained in -- they are relative to the entire
website.
1. Site-Relative. The address of the link is relative to theDocument-Relative Links
overall site.Any relative link that is NOT a site-relative link MUST
2. Document-Relative The address of the link isbe a document-relative link. Document-relative links are
relative to the address of the document the linklinks that are relative to the document that contains
appears in.them. Here are some examples of document-relative
It is important to understand that if you are testing weblinks:comedy.html -- refers to the file comedy.html in the
pages and sites on a computer without a web server,same folder.humor/sickjokes.htm -- refers to the file
site-relative links probably will not work. With that said,sickjokes.html, which is located in the humor folder,
here are detailed explanations of site relative linksrelative to the directory of the document it is
versus document relative links.referenced in.
Site Relative-Links../MotherInLawJokes.html -- refers to the file
In a site-relative link the address always begins with aMotherInLawJokes in the folder above the directory of
forward slash -- "/". The forward slash indicates thatthe document it is referenced in.
the address is relative to the web server's notion ofLinks to the above three documents would look like
the site root.this:
Let us suppose that your site is located at the web
location:Address of file in same director
[Address of file in lower level director
Furthermore, let us now suppose that you want to
refer to a document located at:Address of file in directory one level up
Conclusion
[When you move a document that contains
Then the site-relative address of that document wouldroot-relative links the links will continue to work. On the
be:other hand, the root-relative links which refer to that
document may break. In general, for working on small
/RedDirectory/FatDirectory/Jokes.htmland, a link to thatsites, document-relative links are preferred, and they
document would look like this:have the additional advantage that they can be tested
on a computer that does not host a web server.