Labs ICT
Pro Login

Link Paths

When you link to a page, you need to tell the browser exactly where to find it. The path you write in the href attribute can be either absolute (the full web address) or relative (just enough to find the file from where you are). Let me break down the difference.

Absolute Paths

An absolute path is the full URL — it starts with https:// and includes the domain name. Use this when linking to pages on other websites.


<a href="https://www.google.com">Go to Google</a>
<a href="https://www.wikipedia.org/wiki/HTML">HTML on Wikipedia</a>
    
Try it Yourself →

Relative Paths

A relative path points to a file on the same website. You skip the domain part and just write the path from the current page to the destination.


<!-- Same folder -->
<a href="about.html">About</a>

<!-- Subfolder -->
<a href="blog/post.html">Blog Post</a>

<!-- Go up one folder -->
<a href="../index.html">Home</a>
    

The .. means "go up one folder level." Use it when the file you are linking to is in a parent directory.

Root-Relative Paths

You can also start the path with a forward slash. This makes it relative to the root of your site, no matter what folder the current page is in.


<a href="/">Homepage</a>
<a href="/products">Products</a>
<a href="/images/logo.png">View Logo</a>
    

This is handy when you have a deep folder structure and do not want to write a long chain of ../ to get back to the top.

When to Use Each

Here is my rule of thumb: use relative paths for everything inside your own site and absolute paths for everything outside. Relative paths keep your site portable — if you move it to a different domain, all your internal links still work.