Posted October 2, 2022
Linking between pages is one of the most fundamental aspects of the web, but did you know there are several different ways you can accomplish this task? Do you know which to use in your application?
The main types of links you will encounter are absolute, relative, root-relative and anchor links:
Absolute links provide complete link information, including the domain, and are the default link structure in many content management systems, such as WordPress. An example of an absolute link is:
<a href="http://www.example.com/absolute.html">Absolute Example A</a>
<!-- Links to resource "absolute.html" on example.com no matter what domain or page you are linking from -->The primary scenario where absolute links should be used is when you are linking to a resource on a different domain. For example, externally linking from a page on SiteA.com to content on SiteB.com. In that scenario, the website domain must be provided.
Absolute links should generally be avoided for content located within the same domain. They should especially be avoided for any content that may be templatized and needing to reference relative file paths.
Relative links are configured to link relative to the file path of the current resource. An example of a relative link is:
<a href="relative.html">Relative Example A</a>
<!-- Links to page "relative.html" located in the same directory as the file you're linking from -->To link to a page at a higher level, use the ../ directive to reference a parent directory one level higher. For example, if your current file is located at example.com/state/city.html and you want to link to example.com/relative.html, you would use the following link on city.html:
<a href="../relative.html">Relative Example B</a>
<!-- Links to page "relative.html" located one directory higher than the file you're linking from -->Using the ../ directive is not limited. To link to a page two or more directories higher, simply stack the directive. For example, if your current file is located at example.com/state/city/city1.html, two directories deeper, and you want to link to example.com/relative.html, use the following:
<a href="../../relative.html">Relative Example C</a>
<!-- Links to page "relative.html" located two directories higher than the file you're linking from -->To go the other direction and link to resources deeper in a child directory, simply replace ../ with the name of your directory, such as child-directory/. For example, to link to example.com/city/relative.html from example.com, you would use the following:
<a href="city/relative.html">Relative Example D</a>
<!-- Links to page "relative.html" located one directory lower than the file you're linking from, in the folder city/ -->While a traditional website might utilize pages with file extensions, such as relative.html or relative.php, WordPress and many other content management systems utilize a URL structure that doesn't use them, such as simply relative/. This is actually a pseudo-directory/folder and for all intents and purposes, it would be the equivalent of relative/index.html or relative/index.php. index files are one of the default filenames used when site traffic visits a directory with no file (and file extension) specified. This means that on sites like WordPress, you may be one directory deeper than you think. If you are on page example.com/state/city/ and want to link to example.com/service/, you are actually two directories deeper, not one. Relatively linking as such would look like:
<a href="../../service/">Relative Example E</a>
<!-- Links to page "service/" located two directories lower than the file you're linking from, the pseudo-directory "/state/city/" -->Relative links can safely be used on any website where you are linking to other content on the same domain.
Avoid using relative links in situations where you are trying to link to other domains. In those cases, absolute links must be utilized in order to specify the full desired destination domain.
Root-relative linking is approached similarly to standard relative links, but instead of the basis for the originating link location being the current file, it is instead the root of the website (typically the primary domain). Basing a link on the root of the site is done by prepending the link with a forward slash (/). For example, you can link to example.com/relative.html from anywhere on the site using the following:
<a href="/relative.html">Relative Example F</a>
<!-- Links to page "relative.html" located in the root directory of the current domain, regardless of the file path of the originating page -->As an additional example, you can relatively link to a file in a directory, based on the root of the website:
<a href="/state/relative.html">Relative Example G</a>
<!-- Links to page "relative.html" located in the "state" directory of the current domain, regardless of the file path of the originating page -->Anchor links, also commonly referred to as in-page links, on-page links, or jump links, point to specific content within a page, rather than to a whole page itself. As is done on this page, anchor links are commonly used to navigate between page sections, typically on pages of longer content. Anchor linking is accomplished by assigning an ID (id="anchor") to an html element and linking to it using a #. If you are linking to content on the same page, you would use the following syntax:
<a href="#anchor">Anchor Example A</a>
<!-- Links to HTML element with ID "anchor" on the current page -->Linking to an anchor on a different page is the same as linking to any other page, the only change is the addition of the anchor to the end of the link. The link structure is the same regardless of whether you're using absolute, relative, or root-relative linking. Using Relative Link Example B (this is an anchor link) from above:
<a href="../relative.html#anchor">Anchor Example B</a>
<!-- Links to HTML element with ID "anchor" on page "relative.html" located one directory higher than the file you're linking from -->If the page you're linking to has URL parameters appended to it, the anchor would occur at the end of the URL, after the parameters. Example:
<a href="relative.html?parameter=value#anchor">Anchor Example C</a>
<!-- Links to HTML element with ID "anchor" on page "relative.html" which also has URL parameter with value "value" defined -->To define an anchor ID for an HTML element in WordPress, while editing a page or post simply select the item you wish to assign an anchor to, and within the "Block" settings in the admin panel to the right, you should find an "HTML anchor" input within the "Advanced" section.
Note: in valid HTML, ID's are unique per page and no ID should be reused on the same web page. They also should contain no spaces, but can utilize hyphens (-) and underscores (_).
Why so basic?
This simplistic website reflects our values of development: to create a fast, clean, custom, accessible, and secure internet.