HTML File Paths
The purpose of this article is to introduce you to HTML file paths, and the different types of files paths you can use in your web pages.
HTML Filepaths are the routes of files in the folder structure of a website that displays where files are located.
Html Filepaths Examples
| Path | Overview |
|---|---|
| <img src=”../picture.jpg”> | “picture.jpg” appears one level above the current folder. |
| <img src=”../picture.jpg”> | “picture.jpg” appears one level above the current folder. |
| <img src=”images/picture.jpg”> | You can find “picture.jpg” in the current directory’s images folder. |
| <img src=”/images/picture.jpg”> | There is a file named “picture.jpg” in the images folder at the root of the website. |
HTML File Paths
Paths indicate the locations of files in a website’s folder structure.
External files are linked using file paths, such as:
- Images
- Web-pages
- Java-Scripts
- Style sheets
Absolute File Paths
The full URL to a file is an absolute file path:
Example
Reminder : In HTML Images, we have covered the <img> element in detail.
Relative File Paths
Relative file paths refer to files close to the current page.
Following is an example of a file path to a file in the images folder at the root of the existing website:
Example
As shown in the following example, the file path points to a file in the images folder in the current folder:
Example
Below is an example. This path points to a file discovered one level above the present folder in the images folder:
Example
Html Filepaths External
Html filepaths can also be a external link where the code has been written and we only apply it to the paths.
An example of images external filepath:
Example:
An example of CSS external filepath:
Example:
An example of JavaScript external filepath:
Example:
Best Practice
In general, it is a good idea to use relative file paths (if possible) when it comes to HTML Filepaths.
When employing relative file paths, your web pages won’t be bound to your current base URL.
You will be able to use all links on your local machine (localhost) and your public domain in the future.
HTML File Path Benefits
HTML file paths play a crucial role in creating web pages and linking different types of resources. The use of HTML file paths in web development provides several advantages, which can be categorized as follows:
Improved organization : HTML file paths enable web developers to organize website files and resources in a logical directory structure. This helps to enhance website maintenance and updates over time.
Better website navigation : By using HTML file paths, web developers can create links between different web pages on their site. This allows users to navigate the website easily and find the content they’re looking for quickly.
Faster page loading : Relative file paths allow web developers to load resources faster without the browser having to make a new request to the server.
Better SEO : HTML file paths can be used to structure website content in a way that is easily understandable by search engine crawlers, leading to improved website visibility and search engine ranking.
Cross-platform compatibility : HTML file paths work across all major web browsers and operating systems, providing a reliable and consistent method for linking website resources.
