What’s the difference between ./dogs.html and /dogs.html?

They are both URL paths. They have different names, though.

<!-- root-relative --> <a href="./dogs.html">Dogs</a>  <!-- absolute --> <a href="/dogs.html">Dogs</a>

There are also fully-qualified URLs that would be like:

<!-- fully qualified --> <a href="https://website.com/dogs.html">Dogs</a>

Fully-qualified URL’s are pretty obvious in what they do — that link takes you to that exact place. So, let’s look those first two examples again.

Say you have a directory structure like this on your site:

public/ ├── index.html └── animals/     ├── cats.html     └── dogs.html

If you put a link on cats.html that links to /dogs.html (an “absolute” path), it’s going to 404 — there is no dogs.html at the base/root level of this site! The / at the beginning of the path means “start at the very bottom level and go up from there” (with public/ being the very bottom level).

That link on cats.html would need to be written as either ./dogs.html (start one directory back and work up) or /animals/dogs.html (explicitly state which directory to start at).

Absolute URLs get longer, naturally, the more complex the directory structure.

public/ ├── animals/ └── pets/     ├── c/     |   └── cats.html     └── d/         └── dogs.html

With a structure like this, for dogs.html to link to cats.html, it would have to be either…

<!-- Notice the TWO dots, meaning back up another folder level --> <a href="../c/cats.html">cats</a>  <!-- Or absolute --> <a href="/animals/pets/c/cats.html">cats</a>

It’s worth noting in this scenario that if animals/ was renamed animal/, then the relative link would still work, but the absolute link would not. That can be a downside to using absolute links. When you’re that specific, making a change to the path will impact your links.

We’ve only looked at HTML linking to HTML, but this idea is universal to the web (and computers, basically). For example, in a CSS file, you might have:

body {   /* Back up one level from /images and follow this path */   background-image: url(./images/pattern.png); }

…which would be correct in this situation:

public/ ├── images/ |   └── pattern.png ├──index.html └── style.css

But if you were to move the CSS file…

public/ ├── images/ |   └── pattern.png ├── css/ |   └── style.css └── index.html

…then that becomes wrong because your CSS file is now nested in another directory and is referencing paths from a deeper level. You’d need to back up another folder level again with two dots, like ../images/pattern.png.

One URL format isn’t better than another — it just depends on what you think is more useful and intuitive at the time.

For me, I think about what is the least likely thing to change. For something like an image asset, I find it very unlikely that I’ll ever move it, so linking to it with an absolute URL path (e.g. /images/pattern.png) seems the safest. But for linking documents together that all happen to be in the same directory, it seems safer to link them relatively.

The post What’s the difference between ./dogs.html and /dogs.html? appeared first on CSS-Tricks.

CSS-Tricks

Comments

comments

Add a Comment

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