HTML File Paths
Learn how to link to files and resources in your HTML documents
📁 What are HTML File Paths?
File paths specify the location of files in your website. They tell the browser where to find images, CSS files, JavaScript files, and other HTML pages.
<!-- Linking to an image -->
<img src="images/photo.jpg" alt="Photo">
<!-- Linking to another page -->
<a href="about.html">About Us</a>Output:
Photo
About Us
Types of File Paths
Relative Paths
Relative to current file location
<img src="image.jpg">Absolute Paths
Complete URL or full path
<img src="/images/photo.jpg">Parent Directory
Go up one folder level
<img src="../images/photo.jpg">External URLs
Link to external websites
<a href="https://example.com">Link</a>🔹 Relative File Paths
Relative paths are relative to the current file's location:
<!-- Same folder -->
<img src="photo.jpg" alt="Photo">
<a href="contact.html">Contact</a>
<!-- Subfolder -->
<img src="images/logo.png" alt="Logo">
<link rel="stylesheet" href="css/style.css">
<!-- Parent folder -->
<img src="../photos/image.jpg" alt="Image">
<a href="../index.html">Home</a>File Structure Example:
website/
├── index.html
├── contact.html
├── images/
│ ├── logo.png
│ └── photo.jpg
├── css/
│ └── style.css
└── pages/
└── about.html
🔹 Absolute File Paths
Absolute paths start from the root directory or include the full URL:
<!-- Root-relative paths -->
<img src="/images/logo.png" alt="Logo">
<a href="/pages/about.html">About</a>
<!-- Full URLs -->
<img src="https://example.com/images/photo.jpg" alt="Photo">
<a href="https://google.com">Google</a>
<!-- Protocol-relative URLs -->
<img src="//cdn.example.com/image.jpg" alt="CDN Image">🔹 Common File Path Examples
Here are practical examples of file paths in different scenarios:
<!-- Images -->
<img src="images/header.jpg" alt="Header">
<img src="../assets/logo.png" alt="Logo">
<!-- CSS Files -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="../styles/global.css">
<!-- JavaScript Files -->
<script src="js/script.js"></script>
<script src="../scripts/app.js"></script>
<!-- HTML Pages -->
<a href="about.html">About</a>
<a href="pages/services.html">Services</a>
<a href="../contact.html">Contact</a>Best Practices:
- Use relative paths for internal files
- Use absolute URLs for external resources
- Keep file names lowercase and use hyphens
- Organize files in logical folders
- Always include alt text for images