A file path shows the exact location of a file inside a website's folder structure.
File paths are commonly used when connecting external resources to your webpage, such as:
Other HTML pages
Images
CSS files
JavaScript files
Understanding file paths is essential for building structured and well-organized websites.
This means the file picture.jpg is located in the same directory as the current HTML file.
<img src="picture.jpg" alt="Image" />
<img src="images/picture.jpg" alt="Image" />
This means the image is inside a folder named images, which is located in the same folder as the current page.
<img src="/images/picture.jpg" alt="Image" />
The forward slash / at the beginning refers to the root directory of the website. This means the images folder is placed at the top level of the website.
An absolute file path contains the complete web address (full URL) of a file.
<img src="https://example.com/images/picture.jpg" alt="Mountain" />
This loads the image directly from a specific website address.
Absolute paths always include:
Protocol (https://)
Domain name
Full file location
A relative file path points to a file based on the current page's location.
From Root Folder<img src="/images/picture.jpg" alt="Mountain" />
<img src="images/picture.jpg" alt="Mountain" />
<img src="../images/picture.jpg" alt="Mountain" />
Relative paths do not include the domain name.
Using relative file paths is generally recommended when possible.
Advantages:Works on localhost (your computer)
Works on live servers
Easier to move the website to a new domain
Keeps your project flexible and portable