HTML Tutorial: HTML File Paths
Learn how to use file paths in HTML to link CSS, JS, images, and other files with examples and colorful outputs
In HTML, file paths specify the location of files you want to include, like CSS, JavaScript, images, or documents. Paths can be relative or absolute.
1️⃣ Relative File Path
INPUT:
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<img src="images/photo.jpg" alt="My Photo">
OUTPUT:
✅ CSS and JS files will be loaded if they are in the same folder
✔️ Relative paths depend on the current HTML file location ✔️ Useful for organizing project folders
2️⃣ Absolute File Path
INPUT:
<link rel="stylesheet" href="https://example.com/css/styles.css">
<script src="https://example.com/js/script.js"></script>
<img src="https://via.placeholder.com/150" alt="Placeholder">
OUTPUT:
✅ CSS and JS files will load from external website
✔️ Absolute paths use full URLs ✔️ Useful for linking external resources or CDNs
3️⃣ Parent Folder Paths
INPUT:
<img src="../images/photo.jpg" alt="Parent Folder Photo">
OUTPUT:
✅ Image loaded from parent folder
✔️ ../ moves up one folder level
✔️ Can chain multiple ../ to move multiple levels
4️⃣ Subfolder Paths
INPUT:
<img src="images/photo.jpg" alt="Subfolder Photo">
OUTPUT:
✅ Image loaded from subfolder
✔️ Subfolder paths specify location within a folder ✔️ Useful for organizing images, scripts, and styles
5️⃣ Best Practices for File Paths
- Use relative paths for local projects
- Use absolute paths for external resources
- Keep folder structure organized (css/, js/, images/)
- Test file paths in different environments
- Avoid spaces and special characters in file names
🚀 What’s Next?
👉 HTML Head
Next lesson will cover:
- Adding metadata and title with
<head> - Linking stylesheets and scripts
- SEO and page optimization basics
Understanding HTML file paths ensures your images, CSS, and JS load correctly, keeping your webpage functional and organized.