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?
7 answers
solution1
316 ACCPTED 2011-04-05 23:04:10
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, eg 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:
solution2
21 2011-04-05 23:04:07
Use
<a href="/fruits/index.html">Back to Fruits List</a>
or
<a href="../index.html">Back to Fruits List</a>
solution3
4 2014-10-10 07:05:00
If you are creating the URL from the server side of an ASP.NET application , and deploying your website to a virtual directory (eg app2) in your website ie http://www.yourwebsite.com/app2/
then just insert
<base href="~/" />
just after the title tag.
so whenever you use root relative eg
<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.
solution4
3 2013-08-07 23:37:18
只需将<a href="/">some link<a/> ，这将使您进入网站的根目录
solution5
3 2011-04-05 23:04:30
<a href="/fruits/index.html">Back to Fruits List</a>
solution6
0 2017-01-12 11:13:07
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.
solution7
-1 2017-08-29 19:24:23
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>
solution8
-1 2021-07-29 16:05:54
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 /
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.