Relative link to a subfolder

Question

Let's assume that I have a website with three files:
/home/blog.html
/home/picture1.jpg
/home/files/picture2.jpg

Now let's edit that blog.html file. When I want to make a link to the current folder, I'll do it this way:
<a href="./">Current folder</a>

But what's the right way to make a link to a file in the current folder, to a subfolder or to a file in a subfolder? It can be either:
<a href="picture1.jpg">Picture 1</a>
<a href="files/">Files</a>
<a href="files/picture2.jpg">Picture 2</a>
or
<a href="./picture1.jpg">Picture 1</a>
<a href="./files/">Files</a>
<a href="./files/picture2.jpg">Picture 2</a>

As I checked, both ways work fine in my browser. But I would like to know which of them is the preferred way? Is any of them in some detail slightly better?

Solution 1

The part ./ is removed from the start of a URL as part of URL resolution as defined in STD 66. This has nothing to do with folders or files; it is just string manipulation dictated by generic URL specifications. Thus, for example, the URLs picture1.jpg and ./picture1.jpg have identical meaning: they resolve to the same absolute URL.

Whether you prefer one to the other is a matter of taste. Other things being equal, it is best to prefer the shorter alternative, not just because of shortness but also in order to somewhat reduce the risk of confusion that people may have with meanings of relative URLs.

Solution 2

This article should help to clear things up for you.

It's only necessary to add dots (.) in front of a forward slash (/) when requesting a folder (aka., directory) above the current one, like this:

../parent_folder/picture1.jpg

Or the current directory like this: ./

Using your examples then, noting the link text as to what they correspond to:

<a href="./">current folder</a>
<a href="picture1.jpg">picture1 in current folder</a>
<a href="files/">files folder</a>
<a href="files/picture2.jpg">picture2 in files folder</a>

You can check links in your webpages using the W3C Link Checker tool.

Comments

[lukaszzenko]

I've read that StackOverflow question a time ago. There must be some kind of outdated info because I created a perfectly valid HTML 4.01 Strict document (checked by W3C validator) that contains a ./ link. I prefer the dot-slash variant over the dot one because of some consistency - you put that slash after every folder so why not after the current one...

[dan]

I do as well, hence it's in the examples. It's only an issue with older browsers browsers.

[MrWhite]

AFAIK the only time when the ./ prefix is required (other than maybe when linking to the current folder?) is in the rare edge case when the first segment of the URL-path contains a : (colon). In this case the ./ makes it a relative URL, otherwise it will be seen as an absolute URL with the scheme being the part before the :.