Home / HTML / File Paths

HTML File Paths

What are File Paths?

A file path describes the location of a file in a website's folder structure. File paths are used when linking to external resources like CSS files, JavaScript files, images, or other HTML pages. Understanding file paths is essential for organizing and linking files correctly.

Types of File Paths

There are three types of file paths in HTML:

Relative paths: Paths relative to the current file
Absolute paths: Paths from the root directory of the website
URLs: Complete web addresses (external resources)

1. Relative Paths

Relative paths are paths relative to the current HTML file. They don't start with a slash (/).

File in Same Folder

If the file is in the same folder as the HTML file, just use the filename:

Example

<!-- Current file: /pages/index.html -->
<!-- Target file: /pages/about.html -->
<a href="about.html">About</a>

<!-- Current file: /pages/index.html -->
<!-- Target file: /pages/image.jpg -->
<img src="image.jpg" alt="Image">

File in Subfolder

If the file is in a subfolder, include the folder name:

Example

<!-- Current file: /index.html -->
<!-- Target file: /css/style.css -->
<link rel="stylesheet" href="css/style.css">

<!-- Current file: /index.html -->
<!-- Target file: /images/photo.jpg -->
<img src="images/photo.jpg" alt="Photo">

File in Parent Folder

Use ../ to go up one level:

Example

<!-- Current file: /pages/about.html -->
<!-- Target file: /index.html -->
<a href="../index.html">Home</a>

<!-- Current file: /pages/about.html -->
<!-- Target file: /css/style.css -->
<link rel="stylesheet" href="../css/style.css">

File in Sibling Folder

Combine ../ with the folder name:

Example

<!-- Current file: /pages/about.html -->
<!-- Target file: /images/photo.jpg -->
<img src="../images/photo.jpg" alt="Photo">

<!-- Current file: /html/intro.html -->
<!-- Target file: /css/main.css -->
<link rel="stylesheet" href="../css/main.css">

2. Absolute Paths

Absolute paths start with a slash (/) and are relative to the root directory of the website:

Example

<!-- From any file, link to root index.html -->
<a href="/index.html">Home</a>

<!-- From any file, link to CSS in css folder -->
<link rel="stylesheet" href="/css/style.css">

<!-- From any file, link to image in images folder -->
<img src="/images/photo.jpg" alt="Photo">

3. URLs (External Resources)

URLs are complete web addresses for external resources:

Example

<!-- External CSS file -->
<link rel="stylesheet" href="https://cdn.example.com/style.css">

<!-- External JavaScript file -->
<script src="https://cdn.example.com/script.js"></script>

<!-- External image -->
<img src="https://example.com/image.jpg" alt="Image">

<!-- External link -->
<a href="https://example.com">Visit Example.com</a>

Path Examples

Here's a sample folder structure and how to reference files:

Example - Folder Structure

website/
    index.html
    css/
        style.css
    js/
        script.js
    images/
        logo.png
    pages/
        about.html
        contact.html

From index.html

Example

<!-- From index.html -->
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<img src="images/logo.png" alt="Logo">
<a href="pages/about.html">About</a>

From pages/about.html

Example

<!-- From pages/about.html -->
<link rel="stylesheet" href="../css/style.css">
<script src="../js/script.js"></script>
<img src="../images/logo.png" alt="Logo">
<a href="../index.html">Home</a>
<a href="contact.html">Contact</a>

Best Practices

Use relative paths: Prefer relative paths for files within your website
Use absolute paths: Use absolute paths when you want paths to work from any location
Use URLs for external resources: Use complete URLs for external files
Organize files logically: Keep files organized in folders (css, js, images, etc.)
Test paths: Always test file paths to ensure they work correctly
Case sensitivity: Be aware that file paths are case-sensitive on some servers

Common Path Mistakes

Missing leading slash: css/style.css vs /css/style.css (different meanings)
Too many ../: Going up too many levels will result in an error
Case sensitivity: Image.jpg vs image.jpg (may not work on some servers)
Missing file extension: Some files need extensions like .html, .css

← HTML JavaScript HTML Head →