• Tutorial List

HTML File Paths

Last updated Jul 08, 2020
HTML File Paths, add Relative Paths on HTML

A file path describes the location or address of a file inside a web site’s folder structure.

HTML File Paths Example

  • main-folder
    • sub-folder
      • images
        • image-3.png
      • image-2.png
      • index.html
    • image-1.png

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML File Paths</title>
</head>
<body>

  <img src="../image-1.png" alt="Image 1">

  <!-- Same -->
  <img src="./image-2.png" alt="Image 2">
  <img src="image-2.png" alt="Image 2">

  <!-- Same -->
  <img src="./images/image-3.png" alt="Image 3">
  <img src="images/image-3.png" alt="Image 3">
  
</body>
</html>

Explanation:

Current page is index.html

  • ../ – One step back from the same folder as the current page.
  • ./ – Target the same folder as the current page.
  • ../image-1.png – the image-1.png is located in One step back (main-folder) from the same folder as the current page. main-folder << sub-folder
  • ./image-2.png – the image-2.png is located in the same folder as the current page.
  • ./images/image-3.png – the image-3.png is located inside the images folder which is located in the same folder as the current page.

Go two steps back or more

If you want to go two steps back from the current folder, just add the ../ (one step back) again –

Two steps back../../

And if you want to go back more, add ../ as many times as you want to go back.

three steps back – ../../../ , four steps back – ../../../../ and so on.

Ask Questions

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