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