Absolute vs Relative Links
When you write a link in HTML, the browser needs to know where to go. And there are two ways to tell it. You can give it the full address. Or you can just describe where the file is from where you currently are. The first is an absolute link. The second is a relative link.
What is an absolute link?
An absolute link contains the complete web address. The protocol, the domain, the path. Everything a browser needs to find something from anywhere in the world.
It does not matter where your HTML file is saved or which folder it lives in. The browser has the full address so it always knows where to go. You have seen these your whole life. Every time you click something and land on a different website, that was an absolute link doing its job.
Here is another example with an image hosted on an external server:
document.addEventListener('click', function(e) {
var link = e.target.closest('a');
if (!link) return;
var href = link.getAttribute('href');
if (!href) return;
var isInternal = href.startsWith('#');
if (!isInternal) e.preventDefault();
var existing = document.getElementById('__link-toast');
if (existing) existing.remove();
var isNewTab = link.target === '_blank';
var toast = document.createElement('div');
toast.id = '__link-toast';
toast.textContent = isInternal ? 'Jumped to section: ' + href : isNewTab ? 'Opens in a new tab → ' + href :
'Link goes to: ' + href;
toast.style.cssText =
'position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#1E293B;color:#E2E8F0;padding:10px
18px;border-radius:8px;font-size:13px;z-index:9999;max-width:90%;text-align:center;box-shadow:0 4px 12px
rgba(0,0,0,0.3);';
document.body.appendChild(toast);
setTimeout(function() { toast.remove(); }, 3000);
});
Use absolute links when pointing to anything outside your own project — another website, an image on another domain, a font or script from a CDN.
What is a relative link?
A relative link contains only a file path. No https://, no domain. Just the route from where you are
right now to where you want to go.
Say your project looks like this:
my-site/
index.html
images/
nadia.jpgFrom inside index.html, you can reach nadia.jpg like this. The browser starts from the
folder where index.html lives, then follows the path from there. It finds images/, then
nadia.jpg inside it. No full address needed because you are already inside the same project.
document.addEventListener('click', function(e) {
var link = e.target.closest('a');
if (!link) return;
var href = link.getAttribute('href');
if (!href) return;
var isInternal = href.startsWith('#');
if (!isInternal) e.preventDefault();
var existing = document.getElementById('__link-toast');
if (existing) existing.remove();
var isNewTab = link.target === '_blank';
var toast = document.createElement('div');
toast.id = '__link-toast';
toast.textContent = isInternal ? 'Jumped to section: ' + href : isNewTab ? 'Opens in a new tab → ' + href :
'Link goes to: ' + href;
toast.style.cssText =
'position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#1E293B;color:#E2E8F0;padding:10px
18px;border-radius:8px;font-size:13px;z-index:9999;max-width:90%;text-align:center;box-shadow:0 4px 12px
rgba(0,0,0,0.3);';
document.body.appendChild(toast);
setTimeout(function() { toast.remove(); }, 3000);
});
Use relative links for everything inside your own project — your own pages, images, CSS files, JavaScript files.
What happens when you move files?
This is where a lot of beginners get tripped up. Say you move index.html into a subfolder called
pages/:
my-site/
pages/
index.html
images/
nadia.jpgNow the relative path images/nadia.jpg is wrong. The browser starts from pages/, looks for
an images/ folder inside it, finds nothing, and the image breaks. You would need to update the path to
go up one level first:
<img src="../images/nadia.jpg" alt="Nadia Rivera in 2023" />The ../ means go up one folder. So ../images/nadia.jpg says go up from
pages/, then look for images/nadia.jpg. Now it works again. Absolute links are not
affected by any of this. The full address never changes no matter where you move your files.
Spotting the difference
One question is all you need. Does the path start with https://? If yes, it is absolute. If no, it is
relative and the browser resolves it from wherever your HTML file lives.
<!-- Absolute -->
<a href="https://www.codingbanana.com/css">CSS</a>
<!-- Relative -->
<img src="images/nadia.jpg" alt="Nadia Rivera" />They can work together
This is something you will see all the time in real projects. An absolute link wrapping a relative image. The anchor tag is absolute because it points to an external URL. The image inside it is relative because it lives in your own project folder. Both are doing exactly the right thing.
<a href="https://www.codingbanana.com/nadia-wiki">
<img src="images/nadia.jpg" alt="Nadia Rivera in 2023" />
</a>What to remember
Absolute links carry the full address and work from anywhere. Relative links describe a path from your current file and depend on your folder structure staying consistent. Use absolute for anything outside your project. Use relative for everything inside it.
Have anything to say about this lesson?
Your feedback helps improve these tutorials. If something was confusing or missing, let us know.