HTML file paths


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

Examples:

Path Description
<img src="picture.jpg"> picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folder

Absolute File Paths

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



                      <img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo">
      
                

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:


                        <img src="/images/mdb192x192.jpg" alt="MDB Logo">
                    

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


                          <img src="images/mdb192x192.jpg" alt="MDB Logo">
                      

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/mdb192x192.jpg" alt="MDB Logo">
                          

Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.