Linking to files using relative paths
Link XHTML Files together
To keep our website's XHTML files organized, we use directories (also called folders) just like with other computer files. (remember to always use only lowercase for directories and filenames and consistent file extensions, either .html or .htm) Suppose your website used the files stored in the directories shown at right, then a link from summer.html to spring.html wouldn't need any directory information since they are in the same directory.
<a href="spring.html">Spring is here</a>!
A link in day.html to night.html would look like
<a href="night.html">Its night</a>
Link To pages IN other directories
When using directories with XHTML files, the hrefs linking them together need to include the directory information. You might think about it as going DOWN into a folder (using the slash / ) or UP out of a folder (using two dots and a slash ../
Linking "down" into Directories
Imagine you are in the fruit.html page. To link to the spring.html page you go down one directory so you'd use this href:
<a href="one/spring.html">
To link to the rain.html page from the fruit.html page, you'd use this href:
<a href="two/rain.html">
To link to pages down more than one directory, just use the slash more than once. To link to the day.html page from the fruit.html page, you'd use this href:
<a href="two/red/day.html">
Linking "up" out of Directories
But now imagine that you are standing with your feet in the moon.html page inside the blue directory which is inside the square directory. Of course to get to the stars.html page in the same directory you just use:
<a href="stars.html">
To link back up to the rain.html page in the square directory "above" you, you'd use two dots and a slash, then the name of the file in an href like this:
<a href="../rain.html">
To go up two levels to the fruit.html page from the moon.html page, use an href like this:
<a href="../../fruit.html">
Linking Across directories
To go sideways to a file in any other directory, just go UP till you are at a common parent directory, then DOWN to the file you want. For example, to link from night.html to stars.html, go up to the common parent directory square, then down to stars.html
<a href="../blue/stars.html">
To go from night.html to summer.html, go up two directories to the sample_root directory, then down to circle, then to summer.html
<a href="../../circle/summer.html">
Avoiding Errors
Always test all of your links by viewing your web site in a browser and clicking through each link. The most common linking errors are incorrect filenames and paths, so if your link doesn't take you where you want to go, review carefully your spelling of file names and directories and be sure you href uses the proper directory structure.