Linking Pages & Files

Broken links are one of the most common student problems. Master relative vs. absolute paths and you will never have a 404 again.

01_two_types

1. Two Types of Paths

Every time you link to another page, image, or stylesheet, you are writing a path. There are two kinds:

  • Relative path — Directions from the current file's location. Works on any server, any domain.
  • Absolute path — The full URL starting with https://. Always points to the same place regardless of where you are. Use this for external sites only.

For links within your own website, always use relative paths. Absolute paths will break if you move your site to a new domain.

02_folder_structure

2. Visualizing Your Folder Structure

Before writing any path, picture your folder like a map. Here is a typical LIS 458 structure:

public_html/
├── index.html
├── about.html
├── css/
│   └── style.css
└── images/
    └── banner.jpg

The question to ask: "Starting from the file I am editing, how do I navigate to the file I need?"

03_same_folder

3. Linking to a File in the Same Folder

If both files are side by side, just use the filename directly:

<!-- In index.html, linking to about.html (both in public_html/) -->
<a href="about.html">About Me</a>
04_into_subfolder

4. Linking Into a Subfolder

Add the folder name and a slash before the filename:

<!-- In index.html, linking to style.css inside the css/ folder -->
<link rel="stylesheet" href="css/style.css">

<!-- In index.html, linking to banner.jpg inside the images/ folder -->
<img src="images/banner.jpg" alt="Site banner">
05_up_a_level

5. Going Up a Folder Level with ../

../ means "go up one folder." This is the most important pattern to memorize.

public_html/
├── index.html
├── css/
│   └── style.css
└── pages/
    └── about.html    ← you are editing this file

<!-- In about.html, you need to go UP from pages/ then INTO css/ -->
<link rel="stylesheet" href="../css/style.css">

<!-- Linking back to the homepage from about.html -->
<a href="../index.html">Home</a>

Each ../ moves you one folder level up. To go up two levels, use ../../.

06_checklist

6. Path Troubleshooting Checklist

If a link, image, or stylesheet is broken, work through this list:

  • Is the filename spelled exactly right, including lowercase? (Servers are case-sensitive.)
  • Is the file extension correct — .html not .HTML or .htm?
  • Are you starting from the right folder? Count how many levels deep your current file is.
  • Did you use ../ to go up when needed?
  • Open the browser console (F12) — it will show the exact broken path in red.