Skip to content

Absolute vs. Relative Links

This link is an absolute link to my projects page: Projects. If you view the source on that link, you’ll see the following:

 <a href="http://www.kevinpaulconnor.com/projects.php">Projects</a>

As you can see, the entire uri, www.kevinpaulconnor.com, is referenced in the anchor tag.

This link is a relative link to my projects page: Projects. If you view the source on that link, you’ll see the following:

 <a href="/projects.php">Projects</a>

Rather than specifying the complete uri to the file, a relative link finds the file by reference to a known location: in this case from the web root of kevinpaulconnor.com, since I used a leading slash. If you omit the leading slash, the link will be relative to the current directory, as in the following link to the wordpress install readme page, which is located in the same directory as this blog: ReadMe

 <a href="readme.html">ReadMe</a>

Using relative internal links whenever possible makes it very easy to move to a new domain name. Suppose I change domains from kevinpaulconnor.com/blog to google.com/blog-all of the relative links will still work, as long as the file structure remains the same on my host/server. But all of the absolute links will need to be painstakingly changed. Maintainable, migratable websites use relative links in place of absolute links whenever possible.

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*