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

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



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


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:

├── 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.

├── 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…



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:

├── images/
|   └── pattern.png
└── style.css

But if you were to move the CSS file…

├── 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 .

Original Article From CSS Tricks

Leave a Reply

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