Universal and Relative Links

There are two types of URLs used in linking: Universal and Relative. You've already made both types in the last lesson. A universal link has an HREF that begins with "http://" and includes a full URL down to the needed file. This is like the <a href="http://www.google.com/"> link.

A relative link only presents the URL path from the page with the link to the page being linked to. This is like the last example of the previous lesson: <a href="page2.html">.

This lesson is about more complex relative links. You may choose to have sub-folders on your site to help organize your file structure. In this case, the files won't be in the same folder and using filenames only will not work. You must provide a complete path from the page with the link to the page being linked to.

Relative linking is important so that the internal (relative) links you make on your hard drive will still work when everything is uploaded to the same file structure on your server. You won't have to change your links as long as your file structure is the same on your server as on your hard drive. We'll be discussing this more when you're ready to upload. For now, just make a "main" folder for everything on your site and put any subfolders there. Don't link to resources outside your "main" folder. Well, you can still include universal links to other sites. They'll work anywhere. That's why they're "universal".

The best way to learn this is to do the following exercises along with reading the explanations of how this works. Begin with the "main" folder made in the previous lesson. Make three HTML files that link to each other and put them all in this "main" folder. Name the files "page1.html", "page2.html", and "page3.html". Nothing else should be in the "main" folder at this point.

Exercise 1 - Downward Linking

Open your "main" folder and make a new subfolder called "folder1". Move "page2.html" and "page3.html" into this new "folder1" directory. Open your "main" folder and you should see "page1.html" and "folder1". The directory "folder1" should contain "page2.html" and "page3.html".

Now open "page2.html" in your browser and try the links. You'll notice that the link to "page1.htm" no longer works, but "page3.html's" link still does. This is because "page3.html" is still in the same folder as "page2.html". The file "page1.html" is no longer in the same folder as "page2.html". None of the links on "page1.html" will work. Lets get them to.

Open "page1.html" in your editor. The links currently read like this:

<a href="page2.html">

AND

<a href="page3.html">

We'll need to add the new folder's name that contains "page2.html" and "page3.html". All we do is add the folder's name and a slash ( / ):

<a href="folder1/page2.html>

AND

<a href="folder1/page3.html>

Now try the new links and they'll work. They lead the browser down to "folder1" and then to the specific files: "page2.html" and "page3.html". This is how you go down a folder hierarchy (directory structure). You just keep listing the subfolders and separating the names with slashes until you reach the file you want.

Exercise 2 - Upward Linking

Now open "page2.html" in your editor and the links will look similar to those originally in "page1.html". The link to "page3.html" still works and doesn't need to be edited, but the link to "page1.html" must go up a level in the folder hierarchy. To do this we add "double dots" ( .. ) to go up one level.

<a href="../page1.html">

The double dots lead the browser up one level. As we'll see later we just add more sets of double dots separated by slashes to move up more levels one at a time.

Now try out the link to "page1.html" on "page2.html". It will work. You'll need to amend the "page1.html" link on "page3.html" likewise. Play around with this until your pages are once again interlinked. Remember to use folder names to go down the folder hierarchy, and double dots ( .. ) to go up.

Exercise 3 - "Up And Down" Linking

Now open your "main" folder and make a second subfolder called "folder2". Move only "page3.html" to this new folder. When you view the contents of your "main" folder, you'll see "page1.html", "folder1", and "folder2". The directory "folder1" contains "page2.html" and "folder2" contains "page3.html".

None of the links to "page3.html" will work because it's in a new folder. Lets amend "page1.html" first. Remember that "page1.html" is still right in the "main" folder, not a subfolder. All we need to do is change the name of the folder to "folder2" instead of "folder1":

<a href="folder2/page3.html">

Now the link to "page3.html" will work on "page1.html". The link on "page2.html" is a different story. On "page2.html" the link to "page1.html" will still work, but we've got to go up and down the folder hierarchy to get to "page3.html".

Lets take a closer look at what we need to do to "page2.html" to link to "page3.html". First, we need to go up one level to the "main" folder. Then we need to go back down to the "folder2" directory. We cannot go "across" to a folder on the same level. We have to go up to the parent directory first and then go back down. The link would look like this:

<a href="../folder2/page3.html">

The above HREF combines the both the up and down actions we've already used. You need to move up in the hierarchy first so we begin with double dots ( .. ). This is the general case, go up before going back down. Then we go down to the new folder, "folder2", where "page3.html" resides.

The link on "page3.html" to "page2.html" is similar. The link to "page1.html" will still work, but "page2.html's" link will not. We'll have to fix this link similar to what we did to "page2.html":

<a href="../folder1/page2.html">

Again, we go up one level to the "main" folder and then down to "folder1" which contains "page2.html". Most sites you'll work on may have a subfolder or two. Others may have a third level of folders. It's rare to find more than this. Lets practice with a third level.

Exercise 4 - An Extra Level

Begin this exercise by opening the "main" folder and moving "folder2" inside "folder1". Now when you open the "main" folder you should see only "page1.html" and "folder1". Opening "folder1", we'll see "page2.html" and "folder2". The directory "folder2" contains "page3.html". Now we've made "folder2" and its contents a third level in the directory hierarchy.

On "page1.html" the link to "page2.html" will still work, but we'll have to add another folder name to the HREF for "page3.html":

<a href="folder1/folder2/page3.html">

Remember that all you need to do to go down the file hierarchy is to use folder names separated by slashes ( / ). The file "page3.html" is two folders down now and all of the parent folders must be included.

The links on "page2.html" are pretty simple. The link to "page1.html" will work as is:

<a href="../page1.html">

The link to "page3.html" must be changed. Now "page3.html" is not across from "page2.html" as in the previous exercise. It's down a level. We just need to change the link on "page2.html" like this:

<a href="folder2/page3.html">

This is the same stuff we've already covered. You just need to keep up with where the pages are relative to one another.

The links on "page3.html" only go up. They'd be coded as below:

<a href="../../page1.html">

<a href="../page2.html">

The only new thing here is the use of two sets of double dots to get to "page1.html". The first set of double dots takes us to "folder1", the second set to "main" where "page1.html" resides. To access "page2.html" from "page3.html" we only need to go up one level.

Practice making different directory structures from scratch with different levels and linking all the pages together. It doesn't take long for this to be second nature.

Root Directories And Mirrored File Structures

You may be asking, "Why can't I just use universal URLs all the time and just forget this relative stuff?" Well, the answer is simple. You'll be making pages on your hard drive where the universal URL to a file is the same as it's file path on your computer. Something like (for Windows):

C:\main\page1.htm

On your server, however, the universal URL to your pages would not begin with your hard drive designation ("C:"). It would begin with your protocol and domain name:

http://www.mysite.com/

The only way you can make links on your hard drive that will also work on your server is to use relative links.

This problem points out the weakness of the universal link. It's not portable or mobile. It's dependent on the "root directory". The root directory is the overall parent folder that contains everything on your web site. On your computer's hard drive, the root directory is the drive itself. On the web, the root directory is the URL you'd type in to get to your site.

What you want to do is to make a single folder on your hard drive to contain your entire web site like using "main" in the examples above. Then make all of the links to your site's internal pages relative links. When you upload the contents of "main" to any server, and you maintain the same file hierarchy, the links will all still work.

This copying of a file structure from your hard drive to your server is called "mirroring". You're making a mirror image of the site on your hard drive on your server. You must use relative links for your site's internal pages to get this to work.

Relative links are portable. I could upload the same site with the same links to various servers and they would work as long as my files all stayed in the same folders and maintained their relative positions to one another in the file structure.

We'll get more into uploading and server stuff later. For now, get into the habit of putting your web projects into "main" folders (you can name these folders whatever you want), and using relative links to connect to your internal pages. Of course, when linking to another site, universal links beginning with "http://" are the rule.

To Next Beginning HTML Lesson

Back To Beginning HTML Index