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

PathOverview
<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

<!DOCTYPE html> <html> <body><img src="https://mrexamples.com/wp-content/uploads/2023/03/Mountain.png" alt="Mountain"></body> </html>

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

<!DOCTYPE html> <html> <body><img src="https://mrexamples.com/wp-content/uploads/2023/03/Mountain.png" alt="Mountain"></body> </html>

As shown in the following example, the file path points to a file in the images folder in the current folder:

Example

<!DOCTYPE html> <html> <body><img src="https://mrexamples.com/wp-content/uploads/2023/03/Mountain.png" alt="Mountain"></body> </html>

Below is an example. This path points to a file discovered one level above the present folder in the images folder:

Example

<!DOCTYPE html> <html> <body><img src="https://mrexamples.com/wp-content/uploads/2023/03/Mountain.png" alt="Mountain"></body> </html>

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: 

<!DOCTYPE html> <html> <body> <div> <img src="https://gowebp.com/wp-content/uploads/2022/03/wordpress-delete-theme-1.png" alt="Mountain"> </div> </body> </html>

An example of CSS external filepath:

Example: 

<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> </body> </html>

An example of JavaScript external filepath:

Example: 

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script> </head> <body> <p id="mrx-example"></p> <script> window.onload = function() { if (window.jQuery) {document.getElementById("mrx-example").innerHTML="JavaScript has been loaded"; } else {document.getElementById("mrx-example").innerHTML="JavaScript has not been loaded"; } }; </script> </body> </html>

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.

If you found this article informative, kindly leave your reaction below as a source of appreciation or a suggestion to bring improvements for the betterment of this site.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon

Leave a Reply

Your email address will not be published. Required fields are marked *