How to set a relative path in HTML?

Question

I am creating a website on localhost. I want to make all of link resources in my website to relative path ( I mean only internal resources).

The website is located in:

http://localhost/mywebsite

I read this useful question Absolute vs relative URLs.

I found differences between /images/example.png and images/example.png.

<a href="/images/example.png">Link To Image</a>

Above relative path should return ROOT_DOCUMENT/images/example.png because of / at the beginning of the URL. As ROOT_DOCUMENT is something like /wamp/www/mywebsite.

But when I tested it, it only returns /wamp/www/images/example.png.

And I should add manually my website folder /mywebsite/images/example.png to relative path.

<a href="mywebsite/images/example.png">Link To Image</a>

And it is not useful because of changing the name of mywebsite. So knowing that:

• Why does this problem occur?
• How can I resolve this problem?

• Alvaro Montoro: This happens to me all the time when I use wampserver. Not an expert on how Apache/Web server works, but the idea is that the server operates over /var/www/ (its root) and your site is a subfolder within it. so if you put the / to make it absolute URL, then it takes the root that is /var/www/ (no subfolders) and you still need to add the folder where your web application is.
• Alexander Kononenko: Put here virtualhost block of your apache config.
• DA.: If you're starting your href's with / then that's not a relative path...that's site-root.
• RokeJulianLockhart: I believe that any answer requires percent-encodement of each path component.

Answer 1

You say your website is in http://localhost/mywebsite, and let's say that your image is inside a subfolder named pictures/:

Absolute path

If you use an absolute path, / would point to the root of the site, not the root of the document: localhost in your case. That's why you need to specify your document's folder in order to access the pictures folder:

"/mywebsite/pictures/picture.png"

And it would be the same as:

"http://localhost/mywebsite/pictures/picture.png"

Relative path

A relative path is always relative to the root of the document, so if your html is at the same level of the directory, you'd need to start the path directly with your picture's directory name:

"pictures/picture.png"

But there are other perks with relative paths:

dot-slash (./)

Dot (.) points to the same directory and the slash (/) gives access to it:

So this:

"pictures/picture.png"

Would be the same as this:

"./pictures/picture.png"

Double-dot-slash (../)

In this case, a double dot (..) points to the upper directory and likewise, the slash (/) gives you access to it. So if you wanted to access a picture that is on a directory one level above of the current directory your document is, your URL would look like this:

"../picture.png"

You can play around with them as much as you want, a little example would be this:

Let's say you're on directory A, and you want to access directory X.

- root
 |- a
 |- A
 |- b
 |- x
 |- X

Your URL would look either:

Absolute path

"/x/X/picture.png"

Or:

Relative path

"./../x/X/picture.png"

• Amir: Thanks a lot, So If I transfer my codes to a host then this line refers to root of document "/pictures/picture.png" & everything works true ?
• D063520: Note that the behaviour of the relative path can be changed via the <base> tag (developer.mozilla.org/en-US/docs/Web/HTML/Element/base)
• Mr. J: shouldn't the relative path be ../../x/X/picture.png ? based on the example directory structure you need to move up two levels to get to root before moving back down, unless I am missing something.

Answer 2

The easiest way to solve this in pure HTML is to use the <base href="..."> element like so:

<base href="http://localhost/mywebsite/" />

Then all of the URLs in your HTML can just be this:

<a href="images/example.png">Link To Image</a>

Just change the <base href="..."> to match your server. The rest of the HTML paths will just fall in line and will be appended to that.

Answer 3

The relative pathing is based on the document level of the client side i.e. the URL level of the document as seen in the browser.

If the URL of your website is: http://www.example.com/mywebsite/ then starting at the root level starts above the "mywebsite" folder path.

• Magnus Lind Oxlund: This is poorly worded.