Relative vs. Absolute Links
Relative Links
Relative links depend on a context. They are relative to their location on their current web site. Relative links are often shorter than absolute links. As a general recommendation, it is better to use relative links when linking to pages within the same web site. There is more than one type of relative link.
| Relative to... | Examples | Notes |
|---|---|---|
| the current page, linking to a document in the same folder as the current page | <a href="somepage.html">Some page</a> |
Just type the name of the file if it is in the same folder |
| the current page, linking to a document in the folder above the current page | <a href="../somepage2.html">page 2</a> |
the dot dot slash ( ../ ) means go up to the
parent folder |
| the current page, linking to a document in two (or more) folders above the current page | <a href="../../somepage3.html">page 3</a> |
the dot dot slash ( ../ ) is used, as in the
example above, but this time it is used twice, meaning that it is two folders
up, instead of just one folder up. The same logic applies with three folders
up, four folders up, etc. |
| the current page, linking to a document in a folder below the current page | <a href="somefolder/somepage2.html">page 2</a> |
"somefolder" is the name of the folder |
| the home page of the web site | <a href="/about_us/me.html">It's all about me</a> |
The link starts with a slash. The web browser will add on
the link to the base url, which, under normal circumstances, means that it
will add it on after the domain name. For example:http://gmu.edu + /about_us/me.html = http://gmu.edu/about_us/me.html |
Using Links Relative to the Home Page
If you own your own web address, or if your web site is on the main level
of the domain name, links relative to the home page will work just fine.
The biggest caveat with links that are relative to the home page of a site is
that it won't work quite in the way that you might expect it to if you are
on a shared server in which your web site is a folder on the main server.
For example, if the web address of your web site is http://portfolios.gmu.edu/yourname/,
your home page is actually one folder deep within the structure of the whole
web site. The "yourname" folder is your folder, and your home
page is located there, but the home page for the server is located at http://portfolios.gmu.edu/.
When working under these circumstances, if you choose to write links that are relative to the site, you will need to take this structure into account. A link to your "about me" page that is relative to the site would look like something like this:
<a href="/yourname/about_me.html">About me</a>
Links to Image Sources
I should point out that all of the rules about referencing link destinations also apply to referencing image source files. You can have images in the same folder as your document, in a child folder, in a parent folder, or in some other location on the web site.
Links to image source files:
<img src="file.jpg" height="200" width="200" alt="Islands" />
<img src="../file.jpg" height="200" width="200" alt="Islands" />
<img src="folder/file.jpg" height="200" width="200" alt="Islands" />
<img src="../folder/file.jpg" height="200" width="200" alt="Islands" />
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.