File Paths

What This Teaches

This lesson teaches how a website is organized as a folder of connected files.

You will learn how browsers find CSS files, JavaScript files, images, and other pages by reading the paths you write in HTML.

Why It Matters

Broken images, missing styles, and JavaScript that does not run are often file path problems.

If the browser cannot find a file, the page may still load, but parts of the site will look or behave broken.

Learning file paths early makes debugging much easier because you can ask one clear question: where is this file in relation to the page asking for it?

Core Concept: A Website Is a Folder

Imagine a website as a folder on your computer. That folder can contain different kinds of files that work together to create the site.

• HTML files: These files contain the structure and content of your webpages. The main page of a website is often named index.html.
• CSS files: These files contain the styling rules that determine how the HTML elements look, including colors, fonts, and layout.
• JavaScript files: These files contain the scripts that make your website interactive, including animations and user input handling.
• Images: These files contain the images displayed on your webpage.
• Other files: Websites can also include other files like videos, audio, and documents.

Core Concept: Paths Tell the Browser Where to Look

To access a file within the website's folder, you need to specify its path.

A path tells the browser the location of the file relative to the current file. Always start from the HTML file that contains the path, then trace your way to the target file.

The most important question is: where is the resource from the perspective of the file asking for it?

Example Site Folder

A small site might use a structure like this:

my-website/
|-- index.html
|-- about.html
|-- styles.css
|-- script.js
|-- icon.png
|-- img/
|   |-- gizmo.jpg
|-- images/
|   |-- logo.png

Path Diagram: Start From the Current File

When you write a path, pretend you are standing inside the current HTML file. From there, move through the folders until you reach the file you need.

Do not start from the whole computer. Start from the file that contains the href or src attribute.

my-website/
|-- index.html               current file
|-- images/
|   |-- logo.png             target file

Path from index.html to logo.png:
images/logo.png

What Each File Does

• index.html: This is the main page of your website. Your home page.
• about.html: This is another page on your website.
• styles.css: This file contains the CSS styles for your website.
• script.js: This file contains JavaScript code for your website.
• img/gizmo.jpg: This is an image file located within the img subfolder.
• images/logo.png: This is an image file located within the images subfolder.
• icon.png: This is an image file that will serve as our favicon, located within the root directory.

Code Example: Link a CSS File

If styles.css sits next to index.html, the path is just the file name.

• rel="stylesheet": Tells the browser this file is a stylesheet.
• href="styles.css": Tells the browser where the CSS file is located.

<link rel="stylesheet" href="styles.css">

Current Folder and Parent Folder Paths

Sometimes you will see paths that start with ./ or ../. These are relative path shortcuts.

• ./ means the current folder.
• ../ means go up one folder.
• ../../ means go up two folders.
• Use these only when they make the path clearer. For simple files beside each other, the file name alone is usually enough.

./styles.css
../images/logo.png
../../index.html

Code Example: Link an Image

If an image is inside a folder, include the folder name in the path.

• src="images/logo.png": Tells the browser to look inside the images folder for logo.png.
• alt="My Website Logo": Describes the image for screen readers and browsers that cannot display it.

<img src="images/logo.png" alt="My Website Logo">

Code Example: Link to Another Page

If about.html sits next to index.html, link to it by file name.

<a href="about.html">Link to About page</a>

Code Example: Link From a Nested Page

Paths change when the current HTML file is inside a folder. In this example, about.html lives inside the pages folder.

• From pages/about.html to images/logo.png, go up one folder, then into images.
• From pages/about.html back to index.html, go up one folder, then choose index.html.

my-website/
|-- index.html
|-- images/
|   |-- logo.png
|-- pages/
|   |-- about.html

Nested Page HTML Example

Inside pages/about.html, the paths would look like this:

<img src="../images/logo.png" alt="My Website Logo">
<a href="../index.html">Home</a>

Relative vs. Absolute Paths

Most class projects will use relative paths. A relative path describes where a file is located compared with the current HTML file.

An absolute path uses the complete URL to a file or page.

• Relative path: images/logo.png
• Relative path: about.html
• Absolute path: https://www.example.com/images/logo.png

Use relative paths for files inside your own project. Use absolute URLs when linking to outside websites or hosted resources.

Root-Relative Paths

A root-relative path starts with a slash, such as /images/logo.png. This tells the browser to start from the root of the current website.

Root-relative paths can be useful, but they can also surprise you on GitHub Pages project sites because the project may be published inside a repository path.

• Root-relative path: /images/logo.png
• Course recommendation: use relative paths like images/logo.png or ../images/logo.png for project files.
• Use root-relative paths only when you understand where the site root will be after publishing.

Code Example: Link JavaScript

JavaScript files add interactivity to webpages.

A common pattern is to load your script near the end of the body so the HTML exists before the script runs.

• src="script.js": Tells the browser where the JavaScript file is located.

<body>
  <h1>Welcome to My Website</h1>
  <script src="script.js"></script>
</body>

Complete HTML Example

Here is how index.html might connect a stylesheet, image, internal page, and JavaScript file.

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <img src="images/logo.png" alt="My Website Logo">
  <a href="about.html">Link to About page</a>
  <script src="script.js"></script>
</body>
</html>

Common Mistakes

• The file name in HTML does not exactly match the real file name.
• The file is in a folder, but the folder name is missing from the path.
• The path uses the wrong folder name, such as image instead of images.
• The file extension is missing or incorrect, such as logo.jpg when the real file is logo.png.
• The project works locally but breaks online because file names use inconsistent capitalization.
• The file name uses spaces or special characters that make paths harder to write and debug.

GitHub Pages is case-sensitive. A path to Logo.png will not find a file named logo.png. Use lowercase file names with dashes, such as about-page.html.

Broken Path Examples

Use this table when something does not load. Most path bugs are spelling, folder, extension, or location problems.

Debugging Checklist

• Find the HTML file that is asking for the resource.
• Find the resource file in your project folder.
• Trace the path from the HTML file to the resource file.
• Check spelling, capitalization, folder names, and file extensions.
• Open browser developer tools and look for 404 errors in the Console or Network tab.

Resources

MDN: Creating hyperlinks | MDN: HTML images