You are currently viewing File Paths in HTML | Lesson 24 HTML Tutorial
HTML File Path

File Paths in HTML | Lesson 24 HTML Tutorial

in this lesson you will tow main types of paths in html Relative or Absolute.
Relative means the file path is related to the web page path, but Absolute means the file path is not related to the path of the web page it could be in another server or from another website.

For Visual Explain! Here Is This Video:

File Paths in HTML Video
PathDescription
1- <img src=”picture.jpg”>picture.jpg is located in the same folder as the current page
2- <img src=”images/picture.jpg”>picture.jpg is located in the images folder in the current folder
3- <img src=”/images/picture.jpg”>picture.jpg is located in the images folder at the root of the current web
4- <img src=”../picture.jpg”>picture.jpg is located in the folder one level up from the current folder

HTML File Paths

A file path describes the location of a file in a web site’s folder structure. File paths are used when linking to external files like:

  • Web pages
  • Images
  • Style sheets
  • JavaScripts

Absolute File Paths

An absolute file path is the full URL to an internet file.

Example:

 <img src="https://www.safhatech.com/images/picture.jpg" alt="example_image"> 

Relative File Paths

A relative file path points to a file relative to the current page. In this example, the file path points to a file in the images folder located at the root of the current web.

Example:

 <img src="/images/picture.jpg" alt="safhatech_image"> 

In this example, the file path points to a file in the images folder located in the current folder.

 <img src="images/picture.jpg" alt="safhatech_image"> 

In this example, the file path points to a file in the images folder located in the folder one level above the current folder.

 <img src="../images/picture.jpg" alt="safhatech"> 

Best Practice

It is best practice to use relative file paths (if possible).

When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains. 


This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

Leave a Reply