An HTML file path describes the location of a file (images, stylesheets, JavaScript files, subpages) within a web server folder structure. Understanding relative and absolute paths is critical to prevent broken image icons and missing stylesheets.
HTML asset references fall into two main categories:
<!-- Absolute URL Path (External Server) -->
<img src="https://kodersolution.com/images/logo.png" alt="Company Logo">
<!-- Relative Path (Current Folder) -->
<img src="logo.png" alt="Logo">
<!-- Relative Path (Subfolder) -->
<img src="images/logo.png" alt="Logo">
<!-- Relative Path (Parent Directory Up 1 Level) -->
<img src="../assets/logo.png" alt="Logo">
<!-- Root-Relative Path (Web Server Root) -->
<img src="/assets/images/logo.png" alt="Logo">
Path rules summary:
https://...): Points to a complete web address on the internet.filename.ext or ./filename.ext): Points to a file in the exact same folder as the current HTML file.folder/filename.ext): Navigates down into a subfolder.../filename.ext): Moves up one folder level above the current directory./folder/filename.ext): Starts from the root directory of the domain regardless of current folder depth.flowchart TD
A["Root Folder (/)"] --> B["index.html"]
A --> C["assets/"]
C --> C1["images/logo.png"]
A --> D["blog/"]
D --> D1["post.html"]
D1 -- "src='../assets/images/logo.png'" --> C1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML File Paths Practical Example</title>
<!-- Root-relative stylesheet link -->
<link rel="stylesheet" href="/styles/main.css">
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Asset Path Referencing</h2>
<div style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px;">
<!-- Relative path pointing to images subfolder -->
<p>Loading local asset: <code>images/banner.webp</code></p>
<!-- Parent relative path example -->
<p>Navigating up one directory level: <code>../about.html</code></p>
</div>
</body>
</html>
localhost or deploying live to production servers.Logo.PNG vs logo.png)./assets/...) for deeply nested pages: Prevents long string chains of ../../../assets/ in sub-subdirectories.Write a relative image path (<img>) tag pointing to an image named hero.jpg located inside an images folder that is inside a parent folder (..)!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.