HTML File Paths and URLs

Link to pages, images, styles and scripts correctly with relative and absolute paths, root-relative URLs and the base element, and fix broken links.

Lesson 14 of 44Beginner15 min read

Every link, image, style sheet and script on a page points to a file somewhere. The text inside href or src that tells the browser where to find it is called a path or URL. Get it right and everything loads; get it wrong and you see broken image icons, unstyled pages and links that lead to "404 Not Found".

There are two main kinds of path. An absolute URL includes the full address, such as https://example.com/images/logo.png, and works from anywhere. A relative path, such as images/logo.png, is worked out from the location of the current page, which makes it short and lets the whole site move to a new domain without editing every link.

File paths confuse almost every beginner at first, mostly because of folders. In this lesson you'll learn how browsers resolve relative paths, how to go up a folder with ../, how root-relative paths starting with / work, and a simple routine for fixing anything that won't load.

Absolute and relative paths

Imagine this project:

Text
my-site/
├── index.html
├── about.html
├── css/
│   └── style.css
├── images/
│   └── logo.png
└── blog/
    └── first-post.html
  • Absolute URL: https://example.com/images/logo.png. The full address; use it for other websites.
  • Relative path: images/logo.png from index.html means "the images folder next to this page".
  • Going up: from blog/first-post.html, the logo is at ../images/logo.png. Each ../ moves up one folder.
  • Root-relative: /images/logo.png starts from the top of the website, wherever the current page is. It works on a real server, but not when you open files directly from your computer.

Paths in different attributes

The same rules apply everywhere a path is expected:

WhereAttributeExample
Link to a pagehref on <a><a href="about.html">
Imagesrc on <img><img src="images/logo.png">
Style sheethref on <link><link rel="stylesheet" href="css/style.css">
Scriptsrc on <script><script src="js/app.js">
Video, audiosrc on <source><source src="media/intro.mp4">

Links can also point to a part of a page with a hash: about.html#team jumps to the element with id="team".

Fixing broken paths

When something won't load:

  1. Open the browser's developer tools and check the Console and Network tabs. Failed files appear in red with a 404 status, along with the full address the browser tried.
  2. Check spelling and case. On most web servers Logo.png and logo.png are different files.
  3. Count the folders: are you missing a ../, or do you have one too many?
  4. Avoid spaces in file names. Use team-photo.jpg, not team photo.jpg.

The <base href="..."> element in the head changes the starting point for every relative path on the page. It's useful in some single-page apps, but it confuses beginners, so use it only when you really need it.

HTML File Paths Syntax

Path patterns

<a href="about.html">Same folder</a>
<a href="blog/first-post.html">Into a subfolder</a>
<a href="../index.html">Up one folder</a>
<a href="/contact.html">From the site root</a>
<a href="https://example.com/">Another website</a>
<a href="about.html#team">A section on another page</a>
<img src="../images/logo.png" alt="Logo">
<link rel="stylesheet" href="css/style.css">

HTML File Paths Summary

  • Absolute URLs include the full address; relative paths start from the current page's folder.
  • ../ goes up one folder; / at the start means the root of the website.
  • The same path rules apply to href and src in links, images, CSS and scripts.
  • Use developer tools to find files that fail with 404, then check spelling, case and folders.
  • Name files in lowercase with hyphens and no spaces.

HTML File Paths Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Navigation from the home page

<nav>
  <a href="index.html">Home</a> |
  <a href="about.html">About</a> |
  <a href="blog/first-post.html">Blog</a> |
  <a href="https://developer.mozilla.org/">MDN docs</a>
</nav>
<p>Our logo lives at <code>images/logo.png</code>, next to this page.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 3Pages in the same folder only need their file name.
  2. Line 4Going into a subfolder adds the folder name and a slash.
  3. Line 5Other websites always need the full absolute URL.
Example 2

Links from inside a subfolder

This would be the HTML of blog/first-post.html:

<header>
  <img src="../images/logo.png" alt="Codevra Shop logo" width="48" height="48">
  <a href="../index.html">Back to home</a>
</header>
<article>
  <h2>Our first post</h2>
  <p>Read more <a href="../about.html#team">about the team</a>.</p>
</article>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2The page is inside blog/, so ../ climbs up to my-site/ before going into images/.
  2. Line 3The same ../ reaches the home page.
  3. Line 7A relative path can still end with a hash to jump to a section.
Example 3

Absolute images and a broken path

<p>Absolute image URL:</p>
<img src="https://picsum.photos/seed/codevra/240/120" alt="A random landscape photo" width="240" height="120">
<p>Broken relative path (no such file here):</p>
<img src="imgs/missing-photo.jpg" alt="Product photo that failed to load" width="240" height="120">
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2An absolute URL loads from another server.
  2. Line 4This file doesn't exist, so the browser shows a broken image and the alt text. Developer tools would list it as 404.

Common HTML File Paths Mistakes

Using a path from your computer

Don't
<img src="C:\Users\ada\Desktop\site\images\logo.png" alt="Logo">
Do
<img src="images/logo.png" alt="Logo">

A path on your hard drive only works on your own computer. Visitors can't see it.

Forgetting to go up a folder

Don't
<!-- inside blog/first-post.html -->
<link rel="stylesheet" href="css/style.css">
Do
<link rel="stylesheet" href="../css/style.css">

From inside blog/, css/style.css would look for blog/css/style.css.

Mixing up case

Don't
<img src="images/Logo.PNG" alt="Logo">   <!-- the file is logo.png -->
Do
<img src="images/logo.png" alt="Logo">

It may work on Windows, then break once uploaded to a Linux server.

HTML File Paths in Real Projects

Paths on real websites

Most sites use root-relative paths such as /css/style.css and /products/lamp so links work from any page. Build tools and frameworks generate many paths for you, and content delivery networks serve images from absolute URLs on separate domains. When pages show without styling after deployment, a wrong CSS path is one of the first things developers check.

HTML File Paths Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

From blog/post.html, complete the path to images/cat.jpg in the folder above.

<img src="images/cat.jpg" alt="A cat">
Multiple choiceeasy

Which of these is an absolute URL?

Multiple choicemedium

What does a path starting with / mean, such as /css/style.css?

Multiple choicemedium

An image works on your computer but is broken after uploading. What's a likely cause?

Fix the bugmedium

This page lives in the site's main folder, next to the images folder. Fix the paths: the image path points to a file on someone's computer, and the link should point to about.html in the same folder.

<img src="C:/Users/sam/site/images/team.jpg" alt="Our team" width="120" height="80">
<a href="/C:/site/about.html">About us</a>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The image uses a relative path
  • The link points to about.html

HTML File Paths Quiz

5 questions to check what you learned.

  1. What does ../ mean in a path?

    • The current folder
    • The website root
    • Go up one folder
    • The home page

  2. Why are relative paths useful?

    • They load faster than absolute URLs
    • The site keeps working if it moves to a new domain
    • They're required for images
    • They hide files

  3. Where can you see which files failed to load?

    • In the HTML source only
    • In the address bar
    • Nowhere
    • In the browser developer tools, Console and Network tabs

  4. What does about.html#team link to?

    • The element with id="team" on about.html
    • A file called team
    • The team folder
    • A new tab

  5. Why should file names avoid spaces?

    • Spaces are invalid in HTML
    • Servers delete them
    • Images can't have spaces
    • Spaces become %20 in URLs and cause mistakes

HTML File Paths Challenge

A small site menu

This page is inside a shop/ folder. Build a navigation with:

  1. A link to ../index.html with the text Home
  2. A link to lamps.html (in the same shop folder)
  3. An image using ../images/logo.png with alt text
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Home link goes up a folder
  • Link to lamps.html
  • Logo uses ../images/logo.png with alt text

Related HTML topics

13LinksLink to other pages, sections, emails and phone numbers.15ImagesAdd pictures with img, write great alt text and keep pages fast.36Head & Meta TagsThe invisible tags that control SEO, social sharing and loading.
Esc
↑↓ to navigateEnter to open