HTML File Paths

Master accurate resource referencing through proper file location notation and path construction

File paths specify resource locations within directory hierarchies. These address strings enable connections to external assets including graphics, stylesheet documents, script libraries, video media, and supplementary HTML pages.

What is a File Path?

A file path is like an address of a file in your computer or on the web. It tells the browser where to find the file you want to include in your HTML document.

There are two main types of file paths:

  • Absolute File Paths: A full URL to a file, including the protocol and domain
  • Relative File Paths: A path relative to the current page's location

Absolute File Paths

An absolute file path is the full URL to a file, including the protocol (http:// or https://) and domain name.

Example - Absolute Path

<img src="https://www.example.com/images/picture.jpg" alt="Picture">

When to use:

Use absolute paths when linking to files on external websites or CDN resources.

Advantages of Absolute Paths:

  • Works from anywhere - doesn't depend on current page location
  • Clear and explicit - easy to understand where the file is
  • Required for external resources (other websites)

Disadvantages of Absolute Paths:

  • Longer URLs that are harder to maintain
  • Won't work if you move your website to a different domain
  • Requires internet connection to work in development

Relative File Paths

A relative file path points to a file relative to the current page's location. This is the most common type of file path used in websites.

Same Folder

If the file is in the same folder as the current page:

Example

<img src="picture.jpg" alt="Picture">

File Structure:

/website
  ├── index.html
  └── picture.jpg

Subfolder

If the file is in a subfolder relative to the current page:

Example

<img src="images/picture.jpg" alt="Picture">

File Structure:

/website
  ├── index.html
  └── /images
      └── picture.jpg

Parent Folder

If the file is in a folder one level up from the current page, use ../:

Example

<img src="../picture.jpg" alt="Picture">

File Structure:

/website
  ├── picture.jpg
  └── /pages
      └── about.html

From about.html, use ../picture.jpg to reference the image.

Multiple Levels Up

To go up multiple levels, use multiple ../ segments:

Example

<img src="../../images/picture.jpg" alt="Picture">

File Structure:

/website
  ├── /images
  │   └── picture.jpg
  └── /pages
      └── /blog
          └── post.html

From post.html, use ../../images/picture.jpg

Root-Relative File Paths

A root-relative path starts with a forward slash / and is relative to the root directory of the website.

Example

<img src="/images/picture.jpg" alt="Picture">
<link rel="stylesheet" href="/css/style.css">
<script src="/js/script.js"></script>

File Structure:

/website (root)
  ├── /images
  │   └── picture.jpg
  ├── /css
  │   └── style.css
  ├── /js
  │   └── script.js
  └── /pages
      └── about.html

From any page, /images/picture.jpg always refers to the same location.

Advantages of Root-Relative Paths:

  • Works from any page in your website
  • Easier to maintain than complex relative paths
  • Clear and consistent across all pages

💡 Note

Root-relative paths require a web server to work properly. They won't work when opening HTML files directly in a browser (using file:// protocol).

File Path Symbols

Symbol Meaning Example
/ Root directory /images/pic.jpg
./ Current directory ./pic.jpg or pic.jpg
../ Parent directory (one level up) ../images/pic.jpg
../../ Two levels up ../../images/pic.jpg

Common File Path Examples

Linking to Pages

<!-- Same folder -->
<a href="about.html">About</a>

<!-- Subfolder -->
<a href="pages/contact.html">Contact</a>

<!-- Parent folder -->
<a href="../index.html">Home</a>

<!-- Root-relative -->
<a href="/about.html">About</a>

Linking to Images

<!-- Same folder -->
<img src="logo.png" alt="Logo">

<!-- Images folder -->
<img src="images/logo.png" alt="Logo">

<!-- Parent folder -->
<img src="../images/logo.png" alt="Logo">

<!-- Root-relative -->
<img src="/images/logo.png" alt="Logo">

Linking to CSS

<!-- Same folder -->
<link rel="stylesheet" href="style.css">

<!-- CSS folder -->
<link rel="stylesheet" href="css/style.css">

<!-- Parent folder -->
<link rel="stylesheet" href="../css/style.css">

<!-- Root-relative -->
<link rel="stylesheet" href="/css/style.css">

Linking to JavaScript

<!-- Same folder -->
<script src="script.js"></script>

<!-- JS folder -->
<script src="js/script.js"></script>

<!-- Parent folder -->
<script src="../js/script.js"></script>

<!-- Root-relative -->
<script src="/js/script.js"></script>

File Path Best Practices

  • Use relative paths for internal links: Makes your website portable and easier to test locally
  • Use lowercase file names: Some servers are case-sensitive (logo.png vs Logo.png)
  • Avoid spaces in file names: Use hyphens or underscores instead (my-image.jpg not my image.jpg)
  • Use descriptive names: hero-banner.jpg is better than img1.jpg
  • Organize with folders: Keep images, CSS, and JavaScript in separate folders
  • Be consistent: Choose one style (relative or root-relative) and stick to it
  • Test all links: Broken links harm user experience and SEO
  • Use forward slashes: Always use / not backslash even on Windows

Common Mistakes to Avoid

⚠️ Common Errors

  • Wrong slash direction: Using backslash (\) instead of forward slash (/)
  • Case sensitivity: Image.jpg and image.jpg are different on Linux servers
  • Spaces in paths: my image.jpg should be my-image.jpg or my_image.jpg
  • Missing file extension: logo instead of logo.png
  • Incorrect relative path: Not counting folder levels correctly
  • Broken links after moving files: Always update paths when reorganizing

Test Your Knowledge