Absolute and Relative References In HTML

In this article, we're going to go over absolute references and relative references.

Absolute Reference

An absolute reference is a reference (link) specifying the complete path to a page:

The absolute reference (path) to this page which you are currently on is:

http://www.learningaboutelectronics.com/Articles/Absolute-and-relative-references-in-HTML.php

The absolute reference of an address specifies the complete path to the page, including:
- The http protocol- http:// (or https if a secure page)
- The website name- www.learningaboutelectronics.com
- The folder that the page is located in- Articles
- The page name- Absolute-and-relative-references-in-HTML.php

So to create a link to an external link to the above page, the HTML code would be:

<a href="http://www.learningaboutelectronics.com/Articles/Absolute-and-relative-references-in-HTML.php>Absolute and Relative References in HTML </a>

The code above produces the following link: Absolute and Relative References in HTML

Relative Reference

A relative reference doesn't specify the full path of a web page, but only includes the name of the web page (or a child directory of the current directory that the web page has been uploaded to).

The relative reference of the absolute reference above would be:

Absolute-and-relative-references-in-HTML.php

A relative reference, unlike the absolute reference, only includes the page name of the web page (if the page is not in a child directory). It does not include the http protocol or the website URL. This is because when using a relative reference, it assumes that the website name and folder that the web page has been uploaded to is the same website URL and folder that the web page has been uploaded to. If the page is in a different directory that is a child of a directory the user is currently in, then the folder name (child folder) would be specified.

So in order to include a relative reference in a web page instead of an absolute reference, the link must be the same website URL and folder (or a child directory of the current directory a user is in) that the web page has been uploaded to.

Being that this current page is in the path http://www.learningaboutelectronics.com/Articles/, we can reference any web page included in this folder of this website using the web page only as the reference.

A relative link assumes that the page you are connecting to is the website and folder that you have uploaded the web page to.

This link shown below is in the same website URL and folder (Articles) as this page, so we reference just by this link.

<a href="How-to-create-a-reset-button-in-HTML.php">How to Create a Reset Button in HTML</a>

The code above produces the following link: How to Create a Reset Button in HTML

Relative references have 2 advantages over absolute references. First, they are easier to write, since the path name is much shorter than that of an absolute reference. Second, if a website URL or folder is changed, relative references will still work with a new website URL or folder name, as long as it's in the same website and folder as the new URL and folder. So if a website is changed, an absolute reference will no longer work, while a relative reference will.