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.
Assuming dogs.html and cats.html are in the same directory and you wanted to go from dogs to cats, why wouldn’t you just write
cats.html
instead of./cats.html
?All link references are based on the base “public” directory, so cats.html would be a different location than ./cats.html
cats.html would be located at public/cats.html
./cats.html would be located at public/anotherdirectory/cats.html
I believe the only way you could go from dogs to cats using “cats.html” is if both dogs.html and cats.html were both located at public/dogs.html and public/cats.html
Ok, but what’s the difference between ./dogs.html and dogs.html?
Without a a leading “/”, the assumption would be that “dogs.html” is at the base level – “public/dogs.html”. Whereas, ./dogs.html would be located the next level down – “public/anotherdirectoy/dogs.html”
Why is “public the very bottom level”? Isn’t it at the top?
I still don’t get this tree-thing, putting slashes and dots before my link targets until it works. Sigh.
The subject seems simple but for me extremely useful. Thank you. I don’t know why but often was unsure about links with dots.
Sometimes it can be easier (while construction relative URLs) is to goto a terminal and then use the CD command from where your HTML/CSS file is located and then try to do a “CD ../animals/” to see if it works there. The relative URLs works the same way as paths in your terminal.
I don’t understand what the point of ./ is when you can just omit it, e.g. “./dogs.html” seems to be the same as “dogs.html”, “./images/pattern.png” same as “images/pattern.png”, etc.
Also I find the wording confusing, you mention ./ “starts one directory back”, and you need ../ to go “another folder level again with two dots”, but this pattern doesn’t carry on, to go further back you need ../../, so the number of dots isn’t really tracking how far back you’ve traversed.
Maybe I’m misunderstanding the article, but I’m confused by the terms “root-relative” and “absolute” in
As far as I know, an absolute URL starts with the scheme, followed by a colon, for example “http:”. That’s how I understand RFC 3986. See also https://kb.iu.edu/d/abwp . So
/dogs.html
is not an absolute URL, but a relative one. In fact, it’s a root-relative URL, because it starts with the slash and is therefore not relative to the current directory, but the base directory../dogs.html
on the other hand just refers to the resourcedogs.html
in the same directory, so isn’t the link the same as when you write<a href="dogs.html">Dogs</a>
, as MKM stated?“That link on cats.html would need to be written as either ./dogs.html (start one directory back and work up)”
But
./dogs.html
is not one directory back, it’s the same directory. One directory up would be../dogs
. One point refers to the current directory, two points to the parent directory, like in UNIX filepaths, or not?I think, it should say
Maybe someone who has more knowledge of URLs than I have can tell, what’s right.
Hi matzilla,
You are correct however, there is a difference between URIs and URLs
matzilla you are correct however, slight difference between URIs and URLs
A different subject perhaps but what allows this to work:
with no “http” or “https” I missed some memo. :)
URLs starting with a forward slash are not absolute, they’re relative to the domain. The exception is double forward slash which I guess could be described as being relative to the protocol being used.