An HTML file path tells you where a file is in a website’s folder. For a web browser, a file’s path is like its address. With the help of file paths, we can add any external resource to our HTML file, such as an image, file, CSS file, JS file, video, etc. A file path shows where a file is in the folder structure of a web site. Links to outside files, such as Web pages, use file paths.
To link any outside source to an HTML file, you need to use the src or href attribute.
Here are the different ways to say where a file is:
- <img src=”image_name.jpg”> It says that picture.jpg is in the same folder as the page that is being shown.
- <img src=”img/image_name.jpg”> It says that picture.jpg can be found in the current folder’s images folder.
- <img src=”/img/image_name.jpg”> It says that picture.jpg is in the images folder at the root of the current web.
- <img src=”../image_name.jpg”> It says that picture.jpg is in the folder that is one level above the current one.
HTML File Paths
A file path shows where a file is in the folder structure of a website.
File paths are used to link to files on other servers, like:
- Web pages
- Images
- Style sheets
- JavaScripts
There are two types of File Paths:
- Absolute File Paths
- Relative File Paths
Absolute File Paths
The full URL to a file is an absolute file path:
Example
<!DOCTYPE html>
<html>
<body>
<h2>We are Using a Full URL File Path (Absolute File Path) here</h2>
<img src=”https://www.coderazaa.com/img/coderazaa-logo.png” alt=”alt text” style=”width:300px”>
</body>
</html>
Relative File Paths
A relative file path sends you to a file that is close to the page you are on.
In the following example, the file path points to a file in the images folder at the root of the current web:
Let’s look at an example to see how the file path points to a file in the images folder at the root of the current web.
Example
<!DOCTYPE html>
<html>
<body>
<h2>We are Using a Relative File Path here</h2>
<img src=”/img/coderazaa-logo.png” alt=”alt text” style=”width:300px”>
</body>
</html>
This is how a file path points to a file in the images folder in the current folder.
Example
<!DOCTYPE html>
<html>
<body>
<h2>We are Using a Relative File Path here</h2>
<img src=”img/coderazaa-logo.png” alt=”alt text” style=”width:300px”>
</body>
</html>
When the images folder is in the folder one level up from where you are now.
Example
<!DOCTYPE html>
<html>
<body>
<h2>We are Using a Relative File Path here</h2>
<img src=”../img/coderazaa-logo.png” alt=”alt text” style=”width:300px”>
</body>
</html>
Key points about File path:
- If you don’t use the right URL, file name, or image name, it won’t show up on the page.
- Try to use relative file paths so that your code will work no matter what URL is used. Use relative file paths as much as possible (if possible).
- When you use relative file paths, your web pages won’t be tied to the URL of your current base site. All links will work on your own computer (localhost), as well as on your current public domain and all future public domains.