Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML File Paths
A file path in HTML specifies the location of a resource (like images, videos, stylesheets, or scripts) within a website. File paths can be either relative (pointing to files in relation to the current document) or absolute (providing the complete URL to a resource).
Understanding file paths is crucial for linking resources correctly, ensuring your website works properly across different environments, and maintaining organized project structures.
Syntax
Following are the different syntaxes for specifying file paths −
Relative Path Syntax
src="filename.jpg" src="folder/filename.jpg" src="../folder/filename.jpg" src="/folder/filename.jpg"
Absolute Path Syntax
src="https://www.example.com/images/filename.jpg" src="http://www.tutorialspoint.com/html5/video.mp4"
Relative File Paths
Relative paths specify the location of a file relative to the current document's location. They do not include the domain name and are portable across different environments.
Same Folder Path
When the file is in the same folder as the HTML document −
<img src="image.jpg" alt="My Image">
Subfolder Path
When the file is inside a subfolder relative to the current document −
<img src="images/picture.jpg" alt="Picture"> <link rel="stylesheet" href="css/styles.css">
Parent Directory Path
Using ../ to go up one directory level −
<img src="../images/photo.jpg" alt="Photo"> <script src="../../js/script.js"></script>
Root-Relative Path
Starting with / references the root directory of the website −
<img src="/images/logo.png" alt="Logo"> <link rel="stylesheet" href="/assets/css/main.css">
Absolute File Paths
Absolute paths provide the complete URL to a resource, including the protocol and domain name. They are useful for linking to external resources or when you need a fixed reference regardless of the current document's location.
Example − Using Absolute Paths
<!DOCTYPE html>
<html>
<head>
<title>Absolute File Paths</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>External Resources with Absolute Paths</h2>
<img src="https://www.tutorialspoint.com/images/tp-logo-diamond.png"
alt="TutorialsPoint Logo" width="200">
<p>This image is loaded from an absolute URL.</p>
<a href="https://www.tutorialspoint.com/">Visit TutorialsPoint</a>
</body>
</html>
The output displays the external logo image and link −
External Resources with Absolute Paths [TutorialsPoint Logo Image] This image is loaded from an absolute URL. Visit TutorialsPoint (clickable link)
Practical File Path Example
Following example demonstrates different types of file paths in a typical website structure −
<!DOCTYPE html>
<html>
<head>
<title>HTML File Path Examples</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.path-example { margin: 15px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; }
code { background: #e8e8e8; padding: 2px 4px; border-radius: 3px; }
</style>
</head>
<body>
<h2>File Path Examples</h2>
<div class="path-example">
<h3>Same Directory</h3>
<p>File: <code>logo.png</code> in same folder as HTML</p>
<p>Path: <code>src="logo.png"</code></p>
</div>
<div class="path-example">
<h3>Subdirectory</h3>
<p>File: <code>header.jpg</code> in images folder</p>
<p>Path: <code>src="images/header.jpg"</code></p>
</div>
<div class="path-example">
<h3>Parent Directory</h3>
<p>File: <code>styles.css</code> one level up</p>
<p>Path: <code>href="../css/styles.css"</code></p>
</div>
<div class="path-example">
<h3>Root-Relative</h3>
<p>File: <code>main.js</code> from website root</p>
<p>Path: <code>src="/scripts/main.js"</code></p>
</div>
<div class="path-example">
<h3>Absolute URL</h3>
<p>External resource from another domain</p>
<p>Path: <code>src="https://cdn.example.com/lib.js"</code></p>
</div>
</body>
</html>
The output shows various file path examples with explanations −
File Path Examples Same Directory File: logo.png in same folder as HTML Path: src="logo.png" Subdirectory File: header.jpg in images folder Path: src="images/header.jpg" Parent Directory File: styles.css one level up Path: href="../css/styles.css" Root-Relative File: main.js from website root Path: src="/scripts/main.js" Absolute URL External resource from another domain Path: src="https://cdn.example.com/lib.js"
Video File Path Example
Following example demonstrates how to use different file paths with HTML video elements −
<!DOCTYPE html>
<html>
<head>
<title>Video File Paths</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
video { width: 100%; max-width: 400px; margin: 10px 0; }
button { padding: 8px 16px; margin: 5px; border-radius: 4px; border: 1px solid #ccc; cursor: pointer; }
#output { margin-top: 15px; padding: 10px; background: #f0f8ff; border-radius: 5px; }
</style>
</head>
<body>
<h2>Video File Path Demo</h2>
<video id="demoVideo" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div>
<button onclick="showVideoPath()">Show Video Path</button>
<button onclick="changeVideoPath()">Change to Different Video</button>
</div>
<div id="output"></div>
<script>
var video = document.getElementById("demoVideo");
var output = document.getElementById("output");
function showVideoPath() {
output.innerHTML = "<strong>Current Video Path:</strong><br>" + video.currentSrc;
}
function changeVideoPath() {
video.src = "https://www.w3schools.com/html/movie.mp4";
video.load();
output.innerHTML = "<strong>Video path changed to:</strong><br>" + video.src;
}
</script>
</body>
</html>
This example shows how JavaScript can retrieve and modify video file paths dynamically −
Video File Path Demo [Video Player with Controls] [Show Video Path] [Change to Different Video] (Output area shows current video path when buttons are clicked)
Best Practices for File Paths
Following are some best practices when working with file paths in HTML −
Use relative paths for internal resources to ensure portability across different environments (development, staging, production).
Use absolute paths for external resources like CDN links, social media widgets, or third-party APIs.
Organize files logically in folders like
images/,css/,js/for better maintainability.Avoid spaces and special characters in file and folder names. Use hyphens or underscores instead.
Use lowercase file names for consistency, as some web servers are case-sensitive.
Common File Path Types
| Path Type |
|---|
437 Views
