HTML File Paths

HTML File Paths

A file path is an address that tells the browser where to find a file. Like giving directions to your house!

Absolute file paths

The full address from the internet's root. It starts with the domain (and often https://).

<img src="https://example.com/images/pic.jpg" alt="A picture">

Use this for files hosted on other websites.

Relative file paths

The address relative to your current file. This is usually the best choice for your own website!

Same folder (pic.jpg is right next to your page):

<img src="pic.jpg" alt="A picture">

One folder up (use ../ to go up a level):

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

In a subfolder (go into the images folder):

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

The folder tree

Imagine your website as a file cabinet:

mywebsite/
  index.html
  about.html
  images/
    pic.jpg
    logo.png
  css/
    styles.css

From index.html:

• To reach pic.jpg: images/pic.jpg
• To reach styles.css: css/styles.css

Best practice

Use relative paths for your own files. Your website will work even if you move it to another folder or domain!

TL;DR

• Absolute path: full URL, starts with a domain.
• Relative path: from your current file.
• ../ goes up one folder.
• Folder/name.png goes into a folder.
• Use relative paths for your own site.