A file path in HTML indicates the position of a file within a website directory. It functions as a file's location address for a web browser. By utilizing file paths, we can incorporate various external resources like images, multimedia files, CSS files, JavaScript files, videos, and more into our HTML document.
The src or href attribute is essential as it requires a value to establish a connection between an HTML file and any external source.
File Path Specifications
The <img src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image"> attribute indicates that the file named picture.jpg is situated in the identical directory as the present webpage.
It is specified by <img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> that the file named picture.jpg can be found in the images directory at the main level of the current website.
The <img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> command indicates that the file named picture.jpg can be found in the directory that is one level higher than the current directory.
File paths are essential in web development for linking external resources such as web pages, images, stylesheets, and JavaScript files.
Types of File Paths
In HTML, there are two categories of file paths:
- Absolute
- Relative
1. Absolute File Paths
A complete file path indicates the entire URL of a resource's location on the web. It includes the protocol http:// or https://,, the domain, and the resource's path.
Syntax
The syntax for an absolute file path in HTML is as follows:
<img src="https://placehold.co/800x600/34495e/ffffff?text=Logo" alt="TPT Logo">
Example
<!DOCTYPE html>
<html>
<body>
<h2>Using Full URL File Path</h2>
<img src="https://placehold.co/800x600/34495e/ffffff?text=Logo" alt="TPT Logo" style="width:300px">
</body>
</html>
Output:
2. Relative File Paths
This indicates a file connected to the current page's location. It defines the pathway to the resource's location within the current HTML file that is displayed.
Syntax:
<img src="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="tpt logo">
Example:
Let's examine how the file path directs to a file within the images directory situated at the base of the present web page.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Using Relative File Path</h2>
<img src="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="tpt log" style="width:300px">
</body>
</html>
Example:
This demonstrates the way a file path refers to a file within the images directory situated in the present directory.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Using Relative File Path</h2>
<img src="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="tpt logo" style="width:300px">
</body>
</html>
Example:
In the scenario where the images directory is positioned one directory above the present directory.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Using Relative File Path</h2>
<img src="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="tpt logo" style="width:300px">
</body>
</html>
Document-relative paths vs Root-relative paths
| Document-relative path | Root-relative path |
|---|---|
| Starts without a slash (/) and is resolved based on the location of the current HTML file. | Starts with a slash (/) and is resolved from the root directory of the website. |
| Example:<img> | Example:<img> |
| This looks for the images folder inside the same directory as the HTML file. | This always looks for the images folder at the root of the website, regardless of the HTML file location. |
Important Points for File Path:
- Always remember to use proper URL , file name, image name, else it will not display on the webpage.
- Try to use relative file paths, so that your code will be independent of the URL.
- Organizing your files in a logical structure enables you to manage them easily.
- Use Relative Paths for Internal Resources. It enables you to make your website portable and easier to maintain, especially when you plan to switch to a different domain.
- Test paths locally and on the server. Paths that work on your local machine may not function the same way on a web server due to several directory structures.
- Don't keep spaces in filenames, as spaces can cause issues in URLs. In the place of spaces, use hyphens or underscores.
Conclusion
Understanding HTML file paths is essential for linking various elements like images, stylesheets, and scripts within a webpage. While developing, developers often utilize relative paths, but when it comes to publishing the site, it's common to switch to absolute paths or content delivery network (CDN) links. It is crucial to assess the folder structure, remember that filenames are case-sensitive, and maintain proper file organization to prevent broken links.