HTML File Path

Learn how HTML finds files like images, CSS, and pages using file paths.

What is a File Path?

A file path tells the browser where a file is located inside your project folder.

Simple Meaning: File path is like a home address for files.

Example Folder Structure

project/
│── index.html
│── about.html
│── css/
│   └── style.css
│── images/
│   └── logo.png
│── js/
    └── script.js

Relative File Path

A relative path is based on the current file location.

Example: Image Relative Path

<img src="images/logo.png" alt="Company Logo">
  • images/ → go inside images folder
  • logo.png → file name

Using ../ (Parent Folder)

../ means go one folder back.

Example: Linking CSS from HTML

<link rel="stylesheet" href="../css/style.css">

Tip: Each ../ moves one level up.

Absolute File Path

An absolute path uses the full website URL.

Example: Absolute Image Path

<img src="https://crackease.com/images/logo.png" alt="CrackEase Logo">
  • Starts with https://
  • Used for external or CDN files

Root Relative Path (/)

A root path starts from the website root folder.

Example: Root Path

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

Note: Root path works best on live servers.

Common File Path Mistakes

  • Wrong folder name (case-sensitive)
  • Missing ../
  • Extra or missing slash
  • Testing root path only on local system

Best Practices

  • Use meaningful folder names
  • Prefer relative paths for internal files
  • Organize images, CSS, JS separately
  • Check paths carefully before deployment

Pro Tip: Correct file paths avoid broken images and styles.