Table of Content

Introduction to HTML File Paths

What are File Paths?

Imagine your computer is like an organized house. Files, like your schoolbooks, photos, and music, are organized into different rooms (directories) and shelves (folders). File paths are like addresses that tell you exactly where to find a specific file in this house.

Understanding Directories (Rooms)

Directories are like rooms in your house. They organize files into groups based on what they're related to. For example, you might have a "Schoolwork" directory for all your school files.

Understanding Folders (Shelves)

Folders are like shelves inside each room. They further organize files within a directory. For example, in your "Schoolwork" directory, you might have a folder called "Math" for all your math-related files.

Understanding URLs (Web Addresses)

URLs are like addresses for files on the internet, which is like a giant library of websites. When you type a URL into your browser, it tells the browser exactly where to find the website you're looking for.

Example of a File Path:

Let's say you have a file called "my_essay.docx" stored in the "Documents" directory on your computer. The file path to this file would be:


In this example:

  • C:\Users\Username represents the "house" (directory) where your files are located.
  • Documents is the "room" (directory) where the file is saved.
  • my_essay.docx is the name of the file.

Understanding file paths helps you navigate through your computer and find the files you need quickly and easily.

Absolute and Relative Paths

Absolute Paths: The Full Address

Imagine your house address: "123 Main Street, Anytown, California." This is an absolute address because it gives the complete path from the biggest unit (country) to the smallest (house number).

In computing, an absolute path works the same way. It shows the exact location of a file within the computer's directory system. For example, "/Documents/School/Assignment.doc" means that the file "Assignment.doc" is located in the "School" folder inside the "Documents" folder, which is the root of the computer.

Relative Paths: Directions from Your Current Location

Instead of giving a full address, you can sometimes give directions from where you currently are. For example, if you're in the "School" folder, you could say "Homework.doc" to refer to a file in that folder. This is a relative path because it only describes the location relative to your current position.

Comparing Absolute and Relative Paths

  • Absolute paths: Always start with the root directory ("/") and provide the complete path to the file.
  • Relative paths: Start from the current directory and describe the location of the file in relation to it.

Which to Use:

  • Use absolute paths when you want to clearly specify the exact location of a file, regardless of your current location.
  • Use relative paths when you're referring to files that are located in the same folder or a subfolder within your current location.

Linking to External Resources

  • Links: Words or images you can click on to go to another website or page.
  • URLs (Uniform Resource Locators): The addresses of websites or pages. They start with "http://" or "https://".


When you click on "Google," it takes you to Google's website because it contains the URL

Defining File Paths for Images, CSS, and JavaScript

  • File paths: The locations of files on your computer or web server.
  • Images: Pictures or graphics (e.g., "my_picture.jpg").
  • CSS (Cascading Style Sheets): Files that control the appearance of websites (e.g., "styles.css").
  • JavaScript: Files that add interactivity to websites (e.g., "script.js").


<img src="images/my_picture.jpg">


<link rel="stylesheet" type="text/css" href="styles.css">


<script src="scripts/script.js"></script>

File Path Variations

Directory Paths:

Think of a directory path like an address for a file or folder on your computer. It tells you where to find the file or folder in a specific way.

InURL Image URL:

This is a special code that points to a specific image on the internet. It's often used in websites and emails to display images.

Forward Slash vs. Backslash (Windows vs. Unix):

These are two different symbols used to separate parts of a directory path.

  • In Windows computers, they use a backslash (), like: C:\Users\John\Documents\
  • In Unix-based computers (e.g., Linux, macOS), they use a forward slash (/), like: /home/john/documents/

Making it Understandable:

Imagine your computer as a big house with different rooms (directories) and sub-rooms (subdirectories).

  • Directory Path: The address of a specific room in the house, like "John's Room" in "Second Floor".
  • InURL Image URL: The address of a specific picture on a wall in "John's Room".
  • Forward Slash (/) vs. Backslash (): Different ways to write the address, like saying "go right" vs. "go left" to get to a room.



This address leads to an image file named "my_picture.jpg" in the "images" subdirectory of the "john" directory. The forward slash (/) is used because this is a Unix-based system.

Best Practices for Using File Paths

  • Semantic and Organized Folder Structure: Imagine your website as a house. You want the rooms (folders) to be named clearly so that you can easily find what you're looking for. For example, instead of "Folder1," name it "Images." This makes it easy to understand what's inside.
  • Using Relative Paths for Website Maintenance: When you move files around your website, you might accidentally break links. Relative paths help prevent this by using the current folder as a reference point. For example, if you have an image in a folder called "Pictures," you would link to it as "../Pictures/image.png" from another folder. If you move the "Pictures" folder, the link will still work.
  • Cross-Browser Compatibility Considerations: Different browsers (like Chrome, Firefox, etc.) can display websites differently. To make sure your website looks and works the same in all browsers, you need to consider compatibility issues. For example, some browsers might not support certain font styles or animations.

Common Mistakes to Avoid

  • Broken Links : Imagine you're trying to find your friend's house. You have the address, but the numbers are mixed up. So, you end up at the wrong house!
    The same thing can happen with links on websites. If the paths to the files are incorrect, clicking on the links won't take you to the right pages.
  • Incorrect File Naming: When you name your files, it's important to be consistent. For example, you could use all lowercase letters, or you could use a combination of uppercase and lowercase. If you're not consistent, it'll be harder to find the files you're looking for.
  • File Path Security: File paths are like the addresses of your files on the computer. If you give out the file paths to other people, they could access your files even if they shouldn't have access. So, it's important to keep your file paths secret.


What is a file path in HTML?

What is a file path in HTML? A file path in HTML is a way to specify the location of a file that you want to include in your web page. This can be a path to another HTML file, an image, a CSS file, a JavaScript file, or any other resource.

What are the types of file paths in HTML?

What are the types of file paths in HTML? There are two main types of file paths:
  • Relative Path:Points to a file relative to the current document's location.
  • Absolute Path:Points to a file using the full URL, including the protocol (e.g.,

How do I use a relative path?

How do I use a relative path? A relative path is used when the resource is located within the same website or directory structure. For example:

<a href="pages/about.html">About Us</a>
<img src="images/logo.png" alt="Logo">
<link rel="stylesheet" href="css/styles.css">
<script src="js/script.js"></script>

How do I use an absolute path?

How do I use an absolute path? An absolute path is used when you need to link to a resource that includes the full URL. For example:

	<a href="">About Us</a>
	<img src="" alt="Logo">
	<link rel="stylesheet" href="">
	<script src=""></script>

How can I add HTML file, CSS file, JavaScript file, and image in HTML Document?

How can I add HTML file, CSS file, JavaScript file, and image in HTML Document? You can link to another HTML file using the <a> tag with the href attribute:

	<a href="path/to/your/file.html">Link Text</a>
You can include a CSS file using the <link> tag in the <head> section of your HTML document:

	<link rel="stylesheet" href="path/to/your/styles.css">
You can add a JavaScript file using the <script> tag:

	<script src="path/to/your/script.js"></script>
You can add an image using the <img> tag with the src attribute:

	<img src="path/to/your/image.jpg" alt="Description of Image">

How do I embed another HTML file?

How do I embed another HTML file? You can embed another HTML file using the <iframe> tag:

	<iframe src="path/to/your/file.html"></iframe>

What should I do if my file path doesn't work?

What should I do if my file path doesn't work?
  • Check the file path: Make sure the path is correct and relative to the current file location.
  • Check the file name: Ensure there are no typos in the file name and extension.
  • Check the file location: Verify that the file exists in the specified location.
  • Check case sensitivity:File paths on some servers are case-sensitive (e.g., Image.jpg is different from image.jpg).

How do I include video and audio files?

How do I include video and audio files? You can include video files using the <video> tag and audio files using the <audio> tag:

<video controls>
  <source src="path/to/your/video.mp4" type="video/mp4">
  Your browser does not support the video tag.

<audio controls>
  <source src="path/to/your/audio.mp3" type="audio/mp3">
  Your browser does not support the audio element.