HTML and CSS Reference
Q: What's a parent folder? If I have a
folder “apples” inside a folder “fruit”, is
“fruit” the parent of “apples”?
A: Exactly. Folders (you might have heard
these called directories) are often described
in terms of family relationships. For instance,
using your example, “fruit” is the parent of
“apples”, and “apples” is the child of “fruit”.
If you had another folder “pears” that was
a child of “fruit”, it would be a sibling of
“apples.” Just think of a family tree.
Q: Okay, parent makes sense, but
what is “..”?
A: When you need to tell the browser that
the file you're linking to is in the parent folder,
you use “..” to mean “move UP to the parent
folder.” In other words, it's browser-speak
Q: What do you do if you need to go
up two folders instead of just one?
A: You can use “..” for each parent folder
you want to go up. Each time you use “..”
you're going up by one parent folder. So, if
you want to go up two folders, you'd type
“../..”. You still have to separate each part with
the “/”, so don't forget to do that (the browser
won't know what “….” means!).
Q: Once I'm up two folders, how do I
tell the browser where to find the file?
A: You combine the “../..” with the
filename. So, if you're linking to a file called
“fruit.html” in a folder that's two folders up,
you'd write “../../fruit.html”. You might expect
that we'd call “../..” the “grandparent” folder,
but we don't usually talk about them that way,
and instead say, “the parent of the parent
folder,” or “../..” for short.
Q: Is there a limit to how far up I can
A: You can go up until you're at the root
of your website. In our example, the root was
the “lounge” folder. So, you could only go up
as far as “lounge”.
Q: What about in the other direction—
is there a limit to how many folders I can
A: Well, you can only go down as many
folders as you have created. If you create
folders that are 10 deep, then you can write
a path that takes you down 10 folders. But
we don't recommend that — when you have
that many folder levels, it probably means
your website organization is too complicated!
In addition, some browsers impose a limit
on the number of characters you can have
in a path. The spec advises caution above
255 characters, although modern browsers
support longer lengths. If you have a large
site, however, it's something to be aware of.
Q: My operating system uses “\” as
a separator; shouldn't I be using that
instead of “/”?
A: No; in web pages you always use “/”
(forward slash). Don't use “\” (backslash).
Various operating systems use different file
separators (for instance, Windows uses “\”
instead of “/”) but when it comes to the Web,
we pick a common separator and all stick to
it. So, whether you're using Mac, Windows,
Linux, or something else, always use “/” in
the paths in your HTML.
In our example, we wanted to link from
“directions.html”, which is in the “about” folder,
to “lounge.html”, which is in the “lounge”
folder, the parent of “about”. So we had to
tell the browser to look UP one folder, and “..”
is the way we tell the browser to go UP.
Your turn: trace the relative path from “elixir.html” to “lounge.html” from the “Back to the
Lounge” link. How does it differ from the same link in the “directions.html” file?