Before you begin to insert links into your documents, it is important to understand how to create links that point to internal and external pages. There are basically two ways to address these links. You are going to either reference these links by absolute or relative paths.
Absolute Paths
Absolute paths are easy to use and understand. These links refer to a very specific location, including the domain name. The absolute path to another location is referred to as the URL. For example, the absolute path to this website’s home page is https://www.itgeared.com/.
You always want to specify the absolute path when you are linking to a web page that is on another website. You should not use absolute paths when linking to pages within your own website. If you do specify absolute paths, you will have a lot of work ahead of you in the event that you change your domain name.
In the event that you change your domain name, it would require that you go back and edit all of your internal links. Therefore, for your internal links, use relative paths instead.
Relative Paths
Relative paths are very useful when you want to create links between your pages within the same website. Unlike absolute paths, relative paths do not include the domain name.
The advantage to using relative paths is that you can change your domain name, and your links will continue to work without having to modify them. Of course, if you move files and folders within your site, you will have to update relative paths as well.
Access a resource from the root directory
If you want to reference a resource from the root directory, your relative path will begin with a forward slash / followed by the location of the resource. For example, from anywhere in your document, you can reference the img1.jpg file by referring to it as so: href="/images/img1.jpg".
Access a resource in a sub-directory
If you want to create a link to the submit.htm page from the index.htm page, you can do so using this relative path: href="forms/submit.htm". Notice that a forward slash / is not included before the directory forms. If you do not include a forward slash, the browser will refer to the resource in a sub-directory from your current location.
Access a resource in another directory
There may be instances where you do not want to reference the location from the root, and the resource is not in a sub-directory. Let’s say you are currently developing the submit.htm page in the forms directory and you want to link to the img1.jpg file. You can use a relative link as follows: href="../images/img1.jpg". Notice that this time, we added .. before the first forward slash. This tells the browser to go “up” one directory, then move down into the “images” directory to access img1.jpg.
Access a resource in the same directory
Finally, if you want to reference another resource that is in the same directory as the source file, you can simply reference the path as follows: href="filename.ext". If you do not specify any information before the filename, the browser will assume that the resource is located in the same directory.
