Relative vs Absolute Paths - linking continued

Now let's say you have a very big website with a lot of pages. So let's suppose that there is an About, and a Portfolio page, there is a sub portfolio, and there are projects.

There is so much going on, what should you do? You should organize your pages inside folders.

You are going to create a folder called projects. Let's say you want to display projects of yours to different people right?

So inside "projects" I am just going to create a folder, and you have multiple pages for these projects. So let's name a file "clienta.html" for client A information, "clientb.html" for a different client, and so forth.

Code for clienta.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      Client A
    </title>
  </head>
  <body>
    <h1>Client A</h1>
    <a href="index.html">Go to home</a>
  </body>
</html>

Code for clienta.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      Client B
    </title>
  </head>
  <body>
    <h1>Client B</h1>
    <a href="index.html">Go to home</a>
  </body>
</html>

You have these two pages, but we want to link to these pages, let's say from the home page. So I am going to go to the home page, and what do we do to link it to pages which are inside a folder?

<!DOCTYPE html>
<html lang="en">
  <head>  
    <title>
      Client B  
    </title>  
  </head>  
  <body>  
    <h1>Hi My name is Aziz</h1>  
    <a target="_blank" href="https://www.google.com">Click me please</a> 

    <a href="about.html">Go to about</a>  
    <a href="clienta.html">Go to Client A</a>  
    <a href="clientb.html">Go to Client B</a>  
  </body>  
</html>

So for the text of the link we can simply put in "Client A" and "Client B", and for the href we can put clienta.html, and clientb.html.

Let's see what happens when I refresh:

When I click over here, it says "Your file was not found".

And the reason for that is because when you are linking files or pages, you want to mention the location of that particular file, relative to the page you are on.

Now what does that mean? That means that this page index.html and all the other files, are inside this first-page folder.

All the files inside the 'first-page' folder

Right now if you want to link from the index.html to the projects folder and inside it the clienta.html file. You want to mention that from this index.html page go to the projects folder, "/" (slash) inside the clienta.html. Like such:

 
    <a href="about.html">Go to about</a>
    <a href="projects/clienta.html">Go to Client A</a>
    <a href="projects/clientb.html">Go to Client B</a>
  </body>
</html>

Just do the same thing for "Client B", and now let's see if it works.

result after clicking a correct relative link

And you see "Client A" shows up.

Going back from a sub-folder

Now the next thing that I want to tell you, is if from clienta.html which is a sub page, you want to go "up" a level and go back to index.html. How do you do that?

    <h1>Client B</h1>  
    <a href="index.html">Go to home</a>  
  </body>  
</html>

This link is not going to work, because it actually says to go to index.html. So from this page which is clientb.html, relative from this, you want to go up one folder, to the first-page folder and inside it, the index.html is there.

So if you want to go up one folder, you always do ../ (dot, dot, and slash).

    <h1>Client B</h1>  
    <a href="../index.html">Go to home</a>  
  </body>  
</html>

That tells you ok, wherever you are from, in our case clientb.html, go not in this folder, but up one folder.

showing the structure of the project pages

So as you can see folder structure, that's our application.

So if I save, and I do the same thing in Client A as well because it's in a sub-folder.

    <h1>Client A</h1>
    <a href="../index.html">Go to home</a>
  </body>
</html>

And now if I click over here it's actually going to go up one folder to the right location of index.html. So that's how you link via the <a> element.

The difference between Relative and Absolute path

The URLs which are relative to a particular location, are called relative paths.

The links which are directly going to a particular location like this particular URL: <a target="_blank" href="https://www.google.com">Click me please</a> is not relative.

These are called absolute paths, because they have the absolute location to an URL.

So let's say if you want to link to iLoveCoding, and to a sub-page like this: <a target="_blank" href="https://ilovecoding.com/pages/about.html">Click me please</a>

This is an absolute path because this has the absolute location where you want to go, it's not a relative location.

 
    <a href="about.html">Go to about</a>  
    <a href="projects/clienta.html">Go to Client A</a>  
    <a href="projects/clientb.html">Go to Client B</a>

The above are relative locations. Now the browser is smart enough to distinguish between absolute and relative paths. Paths that start with http, or https are absolute paths, everything else is treated as a relative path.

All right. so that's pretty much it for this video, I am going to talk to you in the next.

Become a confident software developer with mentor support!
Get Started
Already have an account? Please Login

Relative vs Absolute Paths - linking continued

See the difference between two kinds of paths. relative and absolute paths

HTML Cheatsheet

CSS Cheatsheet

Video Lesson Transcript

Relative Path

Going back from a sub-folder

The difference between Relative and Absolute path