204

Is there a way to have all links on a page be relative to the root directory?

For example, on www.example.com/fruits/apples/apple.html I could have a link saying:

<a href="fruits/index.html">Back to Fruits List</a>

Would this link be pointing to www.example.com/fruits/apples/fruits/index.html or www.example.com/fruits/index.html? If the first, is there a way to have it point to the 2nd instead?

0

7 Answers 7

359

A root-relative URL starts with a / character, to look something like <a href="/directoryInRoot/fileName.html">link text</a>.

The link you posted: <a href="fruits/index.html">Back to Fruits List</a> is linking to an html file located in a directory named fruits, the directory being in the same directory as the html page in which this link appears.

To make it a root-relative URL, change it to:

<a href="/fruits/index.html">Back to Fruits List</a>

Edited in response to question, in comments, from OP:

So doing / will make it relative to www.example.com, is there a way to specify what the root is, e.g what if i want the root to be www.example.com/fruits in www.example.com/fruits/apples/apple.html?

Yes, prefacing the URL, in the href or src attributes, with a / will make the path relative to the root directory. For example, given the html page at www.example.com/fruits/apples.html, the a of href="/vegetables/carrots.html" will link to the page www.example.com/vegetables/carrots.html.

The base tag element allows you to specify the base-uri for that page (though the base tag would have to be added to every page in which it was necessary for to use a specific base, for this I'll simply cite the W3's example:

For example, given the following BASE declaration and A declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
   <TITLE>Our Products</TITLE>
   <BASE href="http://www.aviary.com/products/intro.html">
 </HEAD>

 <BODY>
   <P>Have you seen our <A href="../cages/birds.gif">Bird Cages</A>?
 </BODY>
</HTML>

the relative URI "../cages/birds.gif" would resolve to:

http://www.aviary.com/cages/birds.gif

Example quoted from: http://www.w3.org/TR/html401/struct/links.html#h-12.4.

Suggested reading:

2
  • 3
    So doing / will make it relative to www.example.com, is there a way to specify what the root is, e.g what if i want the root to be www.example.com/fruits in www.example.com/fruits/apples/apple.html?
    – Ali
    Apr 5, 2011 at 23:19
  • 4
    is there a way to dynamically find it? Something like ~ in .NET? What will happen if in each environment you have different folder name? Jul 29, 2014 at 20:26
24

Use

<a href="/fruits/index.html">Back to Fruits List</a>

or

<a href="../index.html">Back to Fruits List</a>
1
  • 2
    ../path worked but /path did not work for me in Expression Web using it within a CSS file. (File was in /Directory and reference /DifferentDirectory Aug 27, 2015 at 0:51
7

If you are creating the URL from the server side of an ASP.NET application, and deploying your website to a virtual directory (e.g. app2) in your website i.e. http://www.yourwebsite.com/app2/

then just insert

<base href="~/" />

just after the title tag.

so whenever you use root relative e.g.

<a href="/Accounts/Login"/> 

would resolve to "http://www.yourwebsite.com/app2/Accounts/Login"

This way you can always point to your files relatively-absolutely ;)

To me this is the most flexible solution.

5
  • 4
    Your answer simply does not work. "tilde slash" works on the server-side in ASP.NET solutions. This question is not about server-side ASP.NET solutions. Oct 10, 2014 at 7:19
  • 1
    I see your theory but it DOES work,(both in practice and in theory) The server replaces the "tilde slash" with whatever is the root of your application when generating the HTML. Have you tried it first?
    – A-Majeed
    Oct 11, 2014 at 7:41
  • Of course I tried it. Web servers do NOT replace tilde slash with the root of an application. Only ASP.NET applications do this. In other environments, there is no such concept as an "application". Oct 12, 2014 at 17:03
  • No I shouldn't have to say I don't use ASP.NET. You made that assumption, but did not mention the assumption in your answer. Also, the question does not mention anything about server runtime environment, so YOU should not have assumed that the question was about an ASP.NET. If you give an answer on StackOverflow, please make sure that you answer the question - and not some other question. Also, I DID say that this question is not about server-side ASP.NET solutions. Oct 14, 2014 at 6:58
  • 1
    Worked for me when I rendered links from javascript May 25, 2019 at 20:33
4

Relative Path Summary (applicable to href, src etc.,):

/file_Or_FolderName          Root directory
./file_Or_FolderName         Current directory
../file_Or_FolderName        Previous directory (One level up)
../../file_Or_FolderName     Previous of previous directory (Two levels up)
../../../file_Or_FolderName  Just like above - Three levels up 

Example:

www.example.com
    ├── apple.html
    └── FolderA
        ├── fileA.html
        └── FolderB
            ├── fileB.html
            └── FolderC
                ├── fileC.html
                └── FolderD       <------ Suppose you're here (current directory)
                    ├── fileD.html
                    └── FolderE
                        └── fileE.html

Following shows how to access the file at different levels using the relative path (applicable to href, src etc.,)

fileD.html                 - same level access(or)
./fileD.html               - same level
./FolderE/fileE.html       - 1 level Down
../fileC.html              - 1 level Up
../../fileB.html           - 2 levels Up
../../../fileA.html        - 3 levels Up
../../../../apple.html     - 4 levels Up (or)
/apple.html                - 4 levels Up but direcly using root /
0
3
<a href="/fruits/index.html">Back to Fruits List</a>
2

To give a URL to an image tag which locates images/ directory in the root like

`logo.png`

you should give src URL starting with / as follows:

<img src="/images/logo.png"/>

This code works in any directories without any troubles even if you are in branches/europe/about.php still the logo can be seen right there.

-3

Use this code "./" as root on the server as it works for me

<a href="./fruits/index.html">Back to Fruits List</a>

but when you are on a local machine use the following code "../" as the root relative path

<a href="../fruits/index.html">Back to Fruits List</a>
1
  • ./ is relative to the current path, not the root
    – Quentin
    Jul 29, 2021 at 16:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.