Menu
A relative link or URL only contains the path following your domain. It does not give the complete information location of your site, but instead, it conveys the address that is relative to where you are. A relative link is commonly used by developers because it makes the process of website building easier.
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 .
Rather than including the entire URL for each page you link, relative URLs cut down on the workload and time needed. For example, coding /about/ is much faster than https://www.example.com/about .
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:
Use
<a href="/fruits/index.html">Back to Fruits List</a>
or
<a href="../index.html">Back to Fruits List</a>
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.
<a href="/fruits/index.html">Back to Fruits List</a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With