Website Paths, Folders & File Names Explained

Many beginner website problems are not caused by HTML, CSS, or JavaScript syntax. They happen because a browser cannot find a file. Understanding folders, filenames, and relative paths helps you connect pages, stylesheets, scripts, and images reliably.

Use this tutorial alongside the core examples on the HTML codes page, CSS codes page, and JavaScript codes page.

Start with a clear project structure

my-website/
├── index.html
├── about.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── images/
    └── logo.png

A path describes how to travel from the file you are currently in to the file you want to use.

Files in the same folder

Because index.html and about.html are together, link from the home page with:

<a href="about.html">About us</a>

Files inside a subfolder

From index.html, connect the stylesheet, script, and image like this:

<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
<img src="images/logo.png" alt="Website logo">

The slash means “open this folder.”

Move up one folder

Suppose you create pages/contact.html. From that page, ../ moves up from pages to the project root:

<a href="../index.html">Home</a>
<link rel="stylesheet" href="../css/style.css">

Relative and root-relative paths

  • images/logo.png is relative to the current HTML file.
  • ../images/logo.png moves up one folder and then enters images.
  • /images/logo.png begins at the website root and normally requires a web server. It may not behave as expected when opening files locally.
  • A full URL such as https://example.com/image.png points to an external location.

Safe naming rules

  • Use lowercase letters: contact.html.
  • Use hyphens instead of spaces: project-photo.png.
  • Keep extensions accurate: .html, .css, .js, and .png.
  • Avoid special characters in filenames.
  • Use one consistent naming style throughout the project.

Capitalization matters online

Windows may treat Logo.png and logo.png as the same file, while a web server may treat them as different files. Match every letter exactly.

How to diagnose a broken path

  1. Find the HTML file containing the path.
  2. Draw or inspect the folder structure.
  3. Start from that HTML file’s folder.
  4. Follow each part of the path in order.
  5. Check spelling, capitalization, and the file extension.
  6. Use the browser developer tools to look for a 404 error after uploading.

Common mistakes

  • Writing a path from the project root when the browser expects a path from the current file.
  • Using a computer path such as C:UsersName... in uploaded HTML.
  • Renaming or moving a file without updating the links to it.
  • Using spaces or inconsistent capitalization.
  • Forgetting that ../ moves up exactly one folder.
  • Linking to style.css while the file is actually inside css.

Exercise: repair four paths

Create the example folder structure. Add links to about.html, css/style.css, js/script.js, and images/logo.png. Then move about.html into a pages folder and update every affected path.

Final check: test locally, then test again after uploading because server capitalization rules can reveal mistakes that Windows did not show.