OREGON STATE UNIVERSITY
Open search box
Relative links are used to link pages and files that reside within the same website.
Modern websites will use relative links because they are more robust than absolute links. When using relative links, a web developer can very easily move sites from one environment to another - like from a development environment, to a staging environment, to a production environment, without worrying about breaking links between the pages of the site.
The code for a relative link might look somewhat confusing to a new web content provider because there are a few different ways they can be written.
To understand a Root Relative link, you need a full URL as an example, so let's say you're on a website with the following URL
http://mysite.oregonstate.edu
The .edu part (or the .com, .org, .net, etc) is known as the top-level domain. When there is nothing that follows the top-level domain in the URL, you're typically on the home page of a website. The home page can also be considered the Base URL.
For a traditional, hand-crafted website, a relative link may look something like this:
<a href="/index.html">Home</a>
For a website that uses some type of a framework, such as Drupal or WordPress, a relative link may look more like this:
<a href="/home">Home</a>
For a Root Relative link, the /home or /index.html would just attach to the base URL, like this:
http://mysite.oregonstate.edu/index.html or http://mysite.oregonstate.edu/home
What this translates to is, if you're moving from something like a development environment to a production environment, the URLs would be something like this:
Development: http://mysite.dev.oregonstate.edu/home to Production: http://mysite.oregonstate.edu/home
If you link all of your internal pages with absolute links while in the development environment, when you move to a production environment, all of the links that use the mysite.dev.oregonstate.edu base URL will break because the actual address of the site is mysite.oregonstate.edu not mysite.dev.oregonstate.edu.
Sometimes you might see something kind of weird like this:
<a href="/../home">Home</a>
You might wonder what those dots mean.
It's pretty simple actually, if you have awareness of the underlying directory structure. The dots tell your system to move up in the directory hierarchy. So, ../ would move up one directory level and then attach to the base URL, ../../ would move up two levels and then attach to the base URL, etc.