How to read and write paths

“An image that was showing a moment ago suddenly disappeared.” “I click the link and get a blank page.” Most of these troubles aren’t mistakes in your code—they come from the path (the location you specified) being slightly off. Here we’ll sort out how to think about the “location” you write in src and href.

When it’s in the same folder

If the image is in the same folder as the HTML file you’re writing, just the file name is fine.

<img src="shima.png" alt="Photo of Shima">

When it’s inside a folder (going down)

If you put the image inside an images folder, write the folder name too. The / is the folder separator.

<img src="images/shima.png" alt="Photo of Shima">

If folders are nested two levels deep, connect that part too.

<img src="images/icons/star.png" alt="Star icon">

Going back up one folder (../)

Sometimes, from an HTML file inside a pages folder, you want to show an image in the images folder one level up. That’s when you use ../ (a symbol meaning “go back up one level”).

<img src="../images/shima.png" alt="Photo of Shima">

You can stack ../. To go back two folders up, use ../../.

<img src="../../images/shima.png" alt="Photo of Shima">

Summed up in a table

The link target in <a href="..."> follows exactly the same rules as <img>.

How it differs from absolute paths

Everything so far is “directions as seen from the current file,” so it’s called a relative path. In contrast, a way to write a location fixed to a single spot is an absolute path.

• Links to other sites … it has to be an absolute path starting with https://. <a href="https://example.com">.
• Even within your own site, you can use an absolute path (a root-relative path) starting with /. Since / points to the outermost folder of the site, it works the same way no matter where the current file sits.

<img src="/images/shima.png" alt="Photo of Shima">

Because the directions don’t change no matter which article you link from, the bigger the site, the more this style is preferred. If you’re unsure, it’s enough to remember “other sites = https://” and “within your own site = a relative path or starting from /.”

Should you write ./?

./ is a way of spelling out “the folder I’m in.” ./shima.png and shima.png point at exactly the same place.

<img src="./shima.png" alt="A photo of Shima">
<img src="shima.png" alt="A photo of Shima">

Both work, so it’s down to taste. Some people add ./ because it makes “I mean the same folder” obvious to themselves.

A path inside CSS is measured from the CSS file

This is the pitfall beginners fall into most. A path in CSS’s background-image: url(...) is measured not from the HTML, but from the CSS file itself.

site/
├─ index.html
├─ css/
│   └─ style.css       ← write the route as seen from this file
└─ images/
    └─ bg.png

With this layout, the answer differs from the HTML one.

<!-- from index.html, images is right next door -->
<img src="images/bg.png" alt="The background photo">

/* from style.css, go up one, then into images */
body {
  background-image: url(../images/bg.png);
}

A path that worked in HTML stops working when you paste it into CSS—this is almost always why. While writing CSS, remember to ask where that CSS file itself lives.

Baselines at a glance

In VSCode, you don’t have to type it

Paths are the kind of thing you miscount, so the surest fix is not to type them by hand at all.

• Let completion do it—type as far as src=" and candidates for the files at that location appear. Pick one and neither the spelling nor the level can be wrong
• Drag the file into the editor—hold ⇧ (Shift) and drag from the explorer into your code, and the path to that file is inserted
• Right-click → “Copy Relative Path”—right-click the file in the sidebar. When folders run deep, this is the fastest route

When the link points at a folder

You’ll often see links that end in a folder, like <a href="about/">. That means “open the index.html inside that folder.” So naming the folder about and the file inside it index.html gives you the tidy URL example.com/about/.

When you do, keep the trailing /. Without it, the server has to work out whether it’s a folder or a file and redirect, which can cost you a little speed.

Summary

1. Same folder means just the file name
2. To go down into a folder, folder-name/file-name
3. To go back up, ../ (which you can stack)
4. Other sites use https://; within your own site, use a relative path or an absolute path starting from /
5. url() in CSS is measured from the CSS file—pasting the HTML path misses
6. When it won’t show, suspect the extension, upper/lowercase, and location—in that order
7. Don’t type it by hand—let completion or “Copy Relative Path” do it

This way of thinking about paths will keep serving you as your folder structure grows. When in doubt, come back to this article to double-check the directions.