The most common form of linking will be to other pages within your website. These are often called internal site links, as they are part of your own website.
When you link to another file, you need to specify the file name in the href attribute like is shown below.
<a href="about-us.htm">About Us</a>
Notice that the only required attribute to make the link work is the href attribute.
If all of your web pages are in the same folder, which is easier to work with, your links can just point to the file. However, as the complexity of your site increases, and you have sub-folders to help organize your files, how you link to your files becomes a little more tricky.
Relative Link Paths
One of the most common linking methods is to use a relative path. For those familiar with DOS, or other command line interfaces, this will seem very familiar.
Consider that you are in your main web path, and you want to link to a file called new-york.html that is under your locations folder. The href value would be “locations/new-york.html” .
However, you are now on a folder called locations. If you wanted to go back to the root folder, you need to prefix the link location with ../, for example href=”../contact-us.html” to go to the contact page.
Every link needs to have this consideration made if you are having subfolders with files. Because of this, if you use folders and subfolders for your content, you will need to verify and test.
The advantage is that this works whether you are testing on a local machine, or running off of a hosted web server.
Absolute Link Paths
Absolute paths work if you are hosted on a web server, but they assume that your files will all start with a forward slash (/). This forward slash means start at the root directory. If you are on your local machine, it would reference C:\ most likely. If you are on a Windows machine, this is not what you’d want.
Note: Notice the difference between the forward slash (web browser) and backslash (file browser for Windows). They mean and do different things.
The major advantage to this method is that if you are on a web server, you always access your links the same way. If we use the examples above, it would be something like:
<a href="/locations/new-york.html">New York Store</a>
<a href="/contact-us.html">Contact Us</a>
Sitewide Links was originally found on Access 2 Learn