Linking to files in the same directory

Making links to files in the same directory (or folder) is a straightforward process because you only need to specify the destination file name. When linking, anytime you don't specify the full URL of a destination file, it is considered a relative URL (or simply relative link). A relative URL is relative to what? A relative URL is relative to the current directory. Both the originating file (linking from) and the destination file (linking to) must be in the same directory for the link functionality to work correctly.

Figure 1 constructing relative links within the products directory

Figure 1 constructing relative links within the products directory

Figure 1 shows some documents in a directory called products. Linking to any one of the files in the product directory requires only the file name. The protocol, server name, and directory information is not needed in linking because both the destination and the originating files are in the same folder. To link, for example, from PDAs.asp to printers.asp, the anchor tag will consist of:

<a href="printers.asp">Printers</a>

From this syntax, the browser will automatically infer the protocol and website address to construct the full URL.

Table 1 below shows the different combinations of linking to various files in the products directory. It is important to understand that the link syntax discussed on this page specifically instructs the browser to look for the destination file in the same folder. So this syntax should be used only when linking to files within the same folder. If your link destination file is outside of the present folder (where the originating link file resides), consider using relative links to files in different directories or use absolute links if the destination file is on a external website.

Table 1 linking to files within the products directory
Linking from Linking to XHTML link syntax
PDAs.asp printers.asp <a href="printers.asp">Printers</a>
PDAs.asp laptop.asp <a href="laptop.asp">Laptop</a>
printers.asp PDAs.asp <a href="PDAs.asp">PDAs</a>
printers.asp laptop.asp <a href="laptop.asp">Laptop</a>
laptop.asp PDAs.asp <a href="PDAs.asp">PDAs</a>
laptop.asp printers.asp <a href="printers.asp">Printers</a>