No aspect of web design is more web-centric than hyperlinks. Creating a link on a page to help visitors to easily access other content is one of the defining traits that set websites apart from other communication mediums like newspapers and radio.

These links are easy to add to a page, but some designers get confused about the optimal implementation because there are two standard ways to create links and two kinds of paths that you can use — absolute and relative paths.

Absolute Path URLs

Absolute paths use URLs that refer to a specific, fully identified location on the internet. These paths include a domain name as part of the link path itself.

Use an absolute path to point to web elements that are on a domain other than your own. For example, to link to a page on a different website you must include the full URL. That link would simply add the element inside the page with the URL used as the value of the href attribute for that link.

You’re also free to use absolute-path URLs on your own domain, with the caveat that if you move among subdomains or among directories on your own server, absolute paths may break. To avoid this problem, the file paths for any local resources should use relative paths.

Relative Path URLs

Relative paths change depending upon the page the links are on — they are relative to the page that they are one (hence the name). If you link to a page on your own site or an image inside of an images directory on that site, a relative path is what you will likely use. Relative paths do not use the full URL of a page.

There are several rules to creating a link using the relative path:

  • Links in the same directory as the current page have no path information listed:filenameSub-directories are listed without any preceding slashes:weekly/filenameLinks up one directory are listed as:../filename

If you are linked off-site, you will use an absolute path that includes the full path to whatever you wish to connect to. If you are linked to a file on the domain which the page you are coding resides, use a relative path that essentially navigates from the page you are on, through the file structure of the site, and finally to the resource you need.

filename

weekly/filename

../filename

Get the Latest Tech News Delivered Every Day