They are both URL paths. They have different names, though.
<!– root-relative –>
<!– absolute –>
There are also fully-qualified URLs that would be like:
<!– fully qualified –>
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:
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.
| └── cats.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 –>
<!– Or absolute –>
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:
/* Back up one level from /images and follow this path */
…which would be correct in this situation:
| └── pattern.png
But if you were to move the CSS file…
| └── pattern.png
| └── style.css
…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.