Labs ICT

HTML File Paths

← HTML Responsive Design
HTML Iframes →

File paths are used to link external resources such as images, scripts, stylesheets, and other HTML pages. Understanding file paths is crucial for organizing your website structure and ensuring all resources load correctly.

Absolute Paths

Absolute paths include the full URL from the domain:

<!-- Absolute paths -->
<img src="https://www.example.com/images/logo.png" alt="Logo">
<link rel="stylesheet" href="https://cdn.example.com/styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<a href="https://www.example.com/about.html">About Page</a>

Relative Paths

Relative paths are relative to the current page's location:

<!-- Relative paths -->
<img src="images/logo.png" alt="Logo">
<link rel="stylesheet" href="styles.css">
<script src="scripts/main.js"></script>
<a href="about.html">About Page</a>

Root-relative Paths

Root-relative paths start with a forward slash (/) and are relative to the domain root: 

<!-- Root-relative paths -->
<img src="/images/logo.png" alt="Logo">
<link rel="stylesheet" href="/css/styles.css">
<script src="/js/main.js"></script>
<a href="/about.html">About Page</a>

Moving Up Directories

Use ../ to move up one directory level:

<!-- File structure example -->
<!--
website/
├── index.html
├── about.html
├── images/
│   └── logo.png
├── css/
│   └── style.css
└── pages/
    ├── contact.html
    └── services.html
-->

<!-- From pages/contact.html to images/logo.png -->
<img src="../images/logo.png" alt="Logo">

<!-- From pages/contact.html to css/style.css -->
<link rel="stylesheet" href="../css/style.css">

<!-- From pages/contact.html to index.html -->
<a href="../index.html">Home</a>

Moving Multiple Levels Up

<!-- Deeper directory structure -->
<!--
website/
├── index.html
└── admin/
    └── pages/
        └── dashboard.html
-->

<!-- From admin/pages/dashboard.html to index.html -->
<a href="../../index.html">Home</a>

<!-- From admin/pages/dashboard.html to images/logo.png -->
<img src="../../images/logo.png" alt="Logo">

Website Structure

my-website/
├── index.html
├── about.html
├── contact.html
├── css/
│   ├── main.css
│   └── responsive.css
├── js/
│   ├── script.js
│   └── utils.js
├── images/
│   ├── logo.png
│   ├── hero-bg.jpg
│   └── icons/
│       ├── home.svg
│       └── menu.svg
└── pages/
    ├── blog.html
    └── portfolio/
        ├── project1.html
        └── project2.html

Path Examples by Location

From root index.html:

<!-- Link to CSS -->
<link rel="stylesheet" href="css/main.css">

<!-- Link to image -->
<img src="images/logo.png" alt="Logo">

<!-- Link to script -->
<script src="js/script.js"></script>

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

<!-- Link to subdirectory page -->
<a href="pages/blog.html">Blog</a>

From pages/blog.html:

<!-- Link to CSS (go up one level) -->
<link rel="stylesheet" href="../css/main.css">

<!-- Link to image (go up one level) -->
<img src="../images/logo.png" alt="Logo">

<!-- Link to script (go up one level) -->
<script src="../js/script.js"></script>

<!-- Link to root page (go up one level) -->
<a href="../index.html">Home</a>

<!-- Link to sibling page -->
<a href="portfolio/project1.html">Project 1</a>

From pages/portfolio/project1.html:

<!-- Link to CSS (go up two levels) -->
<link rel="stylesheet" href="../../css/main.css">

<!-- Link to image (go up two levels) -->
<img src="../../images/logo.png" alt="Logo">

<!-- Link to script (go up two levels) -->
<script src="../../js/script.js"></script>

<!-- Link to root page (go up two levels) -->
<a href="../../index.html">Home</a>

<!-- Link to icon (go up two levels, then into images/icons) -->
<img src="../../images/icons/home.svg" alt="Home">

Path Examples by Resource Type

Images

<!-- Different image path examples -->
<img src="logo.png" alt="Logo">
<img src="images/logo.png" alt="Logo">
<img src="../images/logo.png" alt="Logo">
<img src="/images/logo.png" alt="Logo">
<img src="https://example.com/images/logo.png" alt="Logo">

<!-- Images in subdirectories -->
<img src="images/backgrounds/hero.jpg" alt="Hero background">
<img src="images/icons/menu.svg" alt="Menu icon">
<img src="images/gallery/photo1.jpg" alt="Gallery photo">

Stylesheets

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

<!-- Multiple CSS files -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">

JavaScript Files

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

<!-- Multiple JavaScript files -->
<script src="js/utils.js"></script>
<script src="js/main.js"></script>
<script src="js/app.js"></script>

Links and Navigation

<!-- Page links -->
<a href="about.html">About</a>
<a href="pages/about.html">About</a>
<a href="../about.html">About</a>
<a href="/about.html">About</a>
<a href="https://example.com/about.html">About</a>

<!-- Navigation menu -->
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="pages/blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Current Directory (./)

<!-- Explicit current directory (optional) -->
<img src="./images/logo.png" alt="Logo">
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>

<!-- Same as without ./ -->
<img src="images/logo.png" alt="Logo">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>

Parent Directory (../)

<!-- One level up -->
<img src="../images/logo.png" alt="Logo">

<!-- Two levels up -->
<img src="../../images/logo.png" alt="Logo">

<!-- Three levels up -->
<img src="../../../images/logo.png" alt="Logo">

Root Directory (/)

<!-- Always starts from domain root -->
<img src="/images/logo.png" alt="Logo">
<link rel="stylesheet" href="/css/style.css">
<script src="/js/script.js"></script>
<a href="/about.html">About</a>

Best Practices

recommended-structure/
├── index.html
├── assets/
│   ├── css/
│   │   ├── main.css
│   │   └── responsive.css
│   ├── js/
│   │   ├── main.js
│   │   └── utils.js
│   ├── images/
│   │   ├── logo.png
│   │   ├── backgrounds/
│   │   └── icons/
│   └── fonts/
├── pages/
│   ├── about.html
│   ├── contact.html
│   └── blog/
│       ├── index.html
│       └── posts/
└── data/
    └── config.json

Path Selection Guidelines

✓ When to Use Different Path Types:

  • Root-relative (/path): Best for most internal links and resources
  • Relative (../path): Good for portable components and templates
  • Absolute (https://...): Required for external resources and CDNs
  • Current directory (./path): Optional, mainly for clarity

Common Pitfalls

✗ Common Mistakes:

  • Using too many ../ (indicates poor organization)
  • Mixing absolute and relative paths inconsistently
  • Hard-coding full URLs for internal resources
  • Forgetting that paths are case-sensitive on most servers
  • Using spaces in file names (use hyphens instead)
  • Not testing paths after moving files

Common Problems

Problem Cause Solution
404 Not Found Incorrect path or file doesn't exist Check file location and path spelling
Images not loading Wrong image path or extension Verify image file exists and path is correct
CSS not applying Incorrect CSS file path Use browser dev tools to check path
JavaScript errors Wrong script file path Check console for 404 errors

Debugging Tips

<!-- Use browser developer tools -->
<!-- 1. Open Dev Tools (F12) -->
<!-- 2. Check Network tab for 404 errors -->
<!-- 3. Check Console for JavaScript errors -->
<!-- 4. Inspect Elements to see loaded resources -->

<!-- Test with absolute paths first -->
<img src="/images/test-image.jpg" alt="Test" onerror="console.error('Image not found:', this.src)">

<!-- Use console.log to debug paths -->
<script>
  console.log('Current page:', window.location.pathname);
  console.log('Image path:', '/images/logo.png');
</script>

🧪 Quick Quiz

What does '../' represent in a file path?

← HTML Responsive Design
HTML Iframes →