Having links relative to root?

Question

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?

score 356 · Accepted Answer · edited Feb 12 '14 at 05:26

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:

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 05 '11 at 23:19
is there a way to dynamically find it? Something like ~ in .NET? What will happen if in each environment you have different folder name? — Kremena Lalova, Jul 29 '14 at 20:26

score 24 · Answer 2 · answered Apr 05 '11 at 23:04

24

Use

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

or

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

answered Apr 05 '11 at 23:04

amit_g

30,880
8
61
118

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* – Clay Nichols Aug 27 '15 at 00:51

score 6 · Answer 3 · edited Dec 13 '14 at 21:03

6

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.

edited Dec 13 '14 at 21:03

Karl Wenzel

2,412
25
24

answered Oct 10 '14 at 07:05

A-Majeed

1,410
1
12
12

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. – Anders Marzi Tornblad Oct 10 '14 at 07: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 '14 at 07: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". – Anders Marzi Tornblad Oct 12 '14 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. – Anders Marzi Tornblad Oct 14 '14 at 06:58
1

Worked for me when I rendered links from javascript – Balaji Birajdar May 25 '19 at 20:33

score 3 · Answer 4 · answered Apr 05 '11 at 23:04

3

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

answered Apr 05 '11 at 23:04

moe

28,814
4
19
16

SridharKritha · Answer 5 · 2021-07-30T09:30:53.630

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 /

very well explained with the help of hierarchy. – Sangram Nandkhile Apr 27 '23 at 05:31 — Sangram Nandkhile, Apr 27 '23 at 05:31

score 1 · Answer 6 · answered Jan 12 '17 at 11:13

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.

score -3 · Answer 7 · answered Aug 29 '17 at 19:24

-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>

answered Aug 29 '17 at 19:24

king zecole

59
2

`./` is relative to the current path, not the root – Quentin Jul 29 '21 at 16:22

Having links relative to root?

7 Answers7

Linked

Related