Relative URL's

A basic question (I think)

[MatthewHSE]

Okay, I'm experienced enough to know when to use a complete URL and when to use a relative URL. But I've seen other "formats" for relative URL's that I'm not familiar with, and I don't know what they're supposed to do.

I've always used relative URL's like this:

/images/members/avatar.gif

Of course I also know that I can leave off the beginning slash if I don't need to navigate clear back from the web root.

But I've also seen a lot of other people's source code that has things like this:

../images/members/avatar.gif

What does the ../ do, and what is the advantage to using this type of URL's?

And please forgive me for asking what must be a pretty basic question; tried a search but it appears that the SE's ignore terms like ../ ;)

[encyclo]

A single period "." indicates the current directory, and two periods ".." indicate the directory below the current one. If you're on a Windows PC, open a command prompt and type "dir" - assuming you're not already in the root directory, the first two entries will be "." and "..". This convention comes from Unix too, so it is the same more or less universally: Windows, Linux, FreeBSD, etc.

So, simply, ../images/file.jpg points to a file in a directory one level down, then into "images".

[MatthewHSE]

So kind of like "cd ../" from the command line. I thought it might be something like that but wasn't sure. Well, I don't use a directory structure deep enough to make that worthwhile for now, but I'm filing this technique away in the "Useful Information" corner of my brain! ;)

[scottmack]

>>>>> points to a file in a directory one level down

Isn't it one directory up?

[pageoneresults]

Here's the technical explanation...

Universal Resource Locators: Partial form [w3.org]

[rocknbil]

Getting in the habit of using / is a VERY good habit to get into. For example:

products/images/thumbnails/tn.html
products/large.html

data/my.css
data/my.js

From large.html, to link to my.css or my.js

../data/my.css

is not bad. But from the tn.html file,

../../../data/my.css

Is just plain silly.

The cool part is,

/data/my.css

will work for both files.

What this means is you are building a more portable system. If you use the latter, you can move tn.html out to root, or create a new directory and put it in it, and it will still work.

And how about this?

td.whatever { background-image: url(/images/whatever.jpg); }

The css file normaly links relative to itself (** pls. no flames, I know about the exceptions) but this one closes up another hole where you'd be using copies or rediculously confusing toothpicks and dots. I used .js and .css for examples, but the same is true for any linked resource.

Additionally if you've ever done any scripting that makes use of the PATH_INFO environment variable - relatives will cease to work under some conditions, but the beginning forward slash sets everything right.

[tedster]

I often see a lot of relative URLs in sites that have been created with, or at least influenced by WYSIWYG tools - and cranky CMS systems as well. Sometimes there seem to be more directories than pages, and the Information Architecture is exactly mirrored by the directory structure.

Why do I criticize that? Long, messy URLs. Sometimes the graphics for an interior page's template are in an /images/ directory that lives three steps back and yet another step forward. Uggglee!

I much prefer a flat or nearly flat directory structure -- and I don't even like to use a dedicated /images/ folder, unless the site is pretty darned large.

With a flatter directory structure the pages can call the external files they need with efficient mark-up, and big chunks of code can easily be copy/pasted around the site without running into those ../../ issues that confuse and break things unintendedly.

In fact, I have a "rule' which I follow 95% of the time: no relative URLs going toward the root, only absolutes (or at least root-relative URLs that begin with a slash). This makes the mark-up easily portable if I want to zip up just part of the site and work on it remotely, copy and modify pages into a new part of the IA, and so on.