Absolute vs Relative Links
An absolute link includes the full URL starting with https://, so it works from anywhere on the
web. A relative link contains only a file path — no domain — so the browser resolves it relative to where your
current HTML file is saved. Both appear in <a href="..."> and <img src="...">
tags, and knowing when to use each one is a foundational HTML skill.
What is an absolute link in HTML?
An absolute link (also called an absolute URL) contains the full web address of a resource — the protocol, the domain name, and the file path. Here is an example in an anchor tag:
<a href="https://www.codingbanana.com/html">HTML</a>And for images:
<img
src="https://www.codingbanana.com/images/nadia-2023.jpg"
alt="Nadia Rivera in 2023"
/>Because the full address is written out, the browser always knows exactly where to go. It does not matter where your HTML file is saved on your computer, or which folder it lives in. The link will work the same way every time.
Use absolute links when linking to external websites, images hosted on another domain or CDN, or resources that live outside your own project folder.
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);
});
What is a relative link in HTML?
A relative link (also called a relative URL or relative file path) contains only the path to a file — no
https://, no domain name. Here is an example:
<img
src="images/nadia.jpg"
alt="Nadia Rivera in 2023"
/>The browser looks at the folder where your current HTML file is saved, then navigates from there. If your HTML file
is in a folder called my-site/ and your image is saved at my-site/images/nadia.jpg, the
relative path images/nadia.jpg leads the browser straight to it.
If the file is not where the path expects it to be, the link breaks — the image will not load, or the page will not open.
Use relative links when linking to other pages within your own project, images, CSS files, or JavaScript files saved in your own folders, or any resource that lives in the same project as your HTML file.
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);
});
Absolute vs relative links: quick comparison
| Absolute link | Relative link | |
|---|---|---|
| Starts with | https:// and a domain |
A folder name or filename |
| Includes domain? | Yes | No |
| Works from anywhere? | Yes | Only if your file structure is correct |
| Best for | External sites, hosted images | Your own pages and local assets |
| Breaks if you move files? | No | Yes, if paths change |
Identifying absolute and relative links: a worked example
Here are links from the Nadia page, sorted by type.
Absolute links — each one starts with https://:
<a href="https://www.codingbanana.com/html">HTML</a>
<a href="https://www.codingbanana.com/css">CSS</a>
<a href="https://www.codingbanana.com/html/nadia-wiki">
<img
src="images/nadia.jpg"
alt="Nadia Rivera in 2023"
/>
</a>Relative links — file paths with no domain:
<img
src="images/nadia.jpg"
alt="Nadia Rivera in 2023"
/>
<img
src="images/nyu-campus.jpg"
alt="New York University campus"
/>Notice that the third absolute example wraps a relative image inside an absolute anchor tag. The
<a href="..."> is absolute because it points to an external URL. The
<img src="..."> inside it is still relative because it points to a local file.
Frequently asked questions
When should I use an absolute link vs a relative link?
Use relative links for everything inside your own project — your own pages, your CSS file, your images. Use absolute links whenever you are pointing to something outside your project, like another website or a hosted image.
Do relative links break when you move files?
Yes. If you move your HTML file into a different folder without updating the paths, your relative links will point to the wrong place and stop working. Absolute links are not affected by this because they always reference the full web address.
Can I use relative links to link to external websites?
No. Relative links only work for files within your own project. To link to another website, you always need an
absolute link with the full https:// address.
What does ../ mean in a relative link?
The ../ in a relative path means "go up one folder level." So ../images/photo.jpg tells
the browser to go up one level from the current folder, then look for an images folder containing
photo.jpg. You can chain these: ../../ goes up two levels.
<!-- Go up one level, then into images/ -->
<img src="../images/photo.jpg" alt="A photo" />
<!-- Go up two levels, then into assets/ -->
<img src="../../assets/logo.png" alt="Logo" />What to remember
The difference comes down to one question: does the path start with https://? If yes, it is absolute.
If no, it is relative, and the browser will look for that file starting from wherever your HTML file lives.
As you build more complex projects with multiple pages and folders, getting comfortable with relative paths becomes one of the most practical skills in HTML.
Have anything to say about this lesson?
Your feedback helps improve these tutorials. If something was confusing or missing, let us know.