HTML Links Not Working – Relative vs Absolute Path Explained Simply

You click a link on your HTML page…
And instead of opening the page, you see:

• 404 Not Found
• Blank page
• Nothing happens at all 😐

For beginners, this feels confusing because the <a> tag looks perfectly correct.

In reality, most HTML link problems happen because of path confusion — especially relative vs absolute paths.

When I was learning HTML, I once uploaded my site and every link broke — even though everything worked locally. The issue was simple: my files were named About.html locally but about.html on the server. That mistake taught me how strict hosting environments really are.

In this guide, I’ll explain why your HTML links are not working, in the simplest way possible, using real beginner mistakes and clear examples.

1. What an HTML Link Actually Does

A basic HTML link looks like this:

When clicked, the browser:

1. Starts from the current page location
2. Looks for the file you mentioned
3. Opens it if found

If it can’t find it → link breaks.

2. Most Common Reason: Wrong File Location

Let’s say your folder structure is:

If you write:

❌ This will NOT work
Because about.html is inside /pages/, not beside index.html.

✅ Correct relative path:

3. What Is a Relative Path? (Simple Explanation)

A relative path starts from the current file’s location.

Examples:

Meaning:

• about.html → same folder
• pages/about.html → inside pages folder
• ../contact.html → go one folder back

4. Relative Path Mistake Beginners Make

You are inside:

And link to:

Browser looks for:

But file is actually:

✅ Correct link:

5. What Is an Absolute Path?

An absolute path gives the full location.

Example (website URL):

This works from any page, because the browser knows exactly where to go.

6. Absolute Path vs Root-Relative Path (Important)

Many beginners confuse these two.

Absolute URL:

Root-relative path:

Root-relative means:

Start from website root folder (public_html)

7. Why /about.html Works Online but Not Locally

When you open HTML files directly:

Root / does not exist like a server.

So:

❌ Often fails locally
✅ Works on hosting

This confuses beginners a lot.

8. File Name and Case Sensitivity Issue

Works on Windows:

Fails on hosting if file is:

Linux servers are case-sensitive.

✅ Always use lowercase names.

9. Missing .html Extension

Sometimes beginners forget extensions.

❌ Example:

Unless you’re using routing or backend, this won’t work.

✅ Fix:

10. Link Works Locally but Breaks After Upload

This usually happens because:

• Folder structure changed
• Case mismatch
• Root-relative paths misused

✅ Fix:

• Recheck hosting folders
• Open target file URL directly
• Match paths exactly

How to Debug a Broken HTML Link (Pro Method)

1. Right-click link → Copy link address
2. Paste in browser
3. If it opens → link correct
4. If not → path problem

You can also:

• Inspect → Network → click link → check 404

My personal rule: if a link fails, I always paste the URL directly into the browser first. If it shows 404, I stop checking HTML and fix the path.

HTML Links Not Working — Common Beginner Questions

Why does my link show 404?
Because the browser cannot find the file at the given path.

Why does it work locally but not after upload?
Hosting servers are case-sensitive and treat root paths differently.

Should I use relative or absolute paths?
Relative paths are better for small projects; absolute URLs for external pages.

Beginner Mistakes Tutorials Don’t Explain

• Difference between relative, root-relative, and absolute paths
• Root path behaving differently locally vs online
• Case sensitivity on servers
• Folder structure confusion

That’s why HTML links feel hard at first.

Quick Fix Checklist

If your HTML links are not working:

• ✔ Correct folder path
• ✔ Correct file name & extension
• ✔ Lowercase filenames
• ✔ Relative path used correctly
• ✔ Avoid / locally
• ✔ Hard refresh browser

Final Thoughts

HTML links don’t break randomly.
They break because the browser can’t find the file.

Once you truly understand relative vs absolute paths,
you’ll fix broken links in seconds — not hours.

Every developer struggled with this at the start. You’re learning the right way 💪