Back to Links page »

Example: Relative Links

Recipe Book Website Structure

Below is a diagram of the structure of the Recipe Book website. For the sake of this example, not all pages are included.

From index.html

Assume we are working in the root level index.html page.

Link to recipes.html:

<a href="recipes.html">Recipes</a>

Link to mango.html:

<a href="tips/mango.html">Mango</a>

Link to mango-chutney.html:

<a href="recipes/mango-chutney.html">Mango Chutney</a>

From mango-chutney.html

Now assume we are working on the mango-chutney.html page.

Link to index.html:

<a href="../index.html">Home</a>

Link to mango-salsa.html:

<a href="mango-salsa.html">Mango Salsa</a>

Link to mango.html:

<a href="../tips/mango.html">Mango</a>

We use ../ to move up one directory. When we link to mango.html, we must move up one directory, and then down in one directory to the tips folder.

Back to Links page »