Introduction to URLs: Relative and Absolute Links

Introduction to URLs: Relative and Absolute Links

Technically speaking, the web address of any page on your website is a type of "URL", or "Uniform Resource Locator". Web addresses are not the only types of URLs around. For example, while "http://www.example.com/" is the URL of a website, indicating that a web page can be accessed by a browser using a communications procedure (or "protocol") known as "HTTP", an address like "ftp://example.com/example.zip" is also a URL. The latter gives the address of a file, "example.zip", that can be accessed by a browser or some other program using another protocol known as "FTP".
On a web page, URLs can be absolute or relative.
An absolute link specifies the full address of a particular page or file, to the very last detail. For example, the URLhttp://www.example.com/features.html is an absolute URL pointing to the page "features.html" on the www.example.com website. It's the equivalent of giving your friend your full home address in the real world, that is, not just the name of the street and house number, but also the city, state and country.
On web pages, it's also possible to use something known as a relative URL. For example, instead of linking to that "features.html" page mentioned above using an absolute URL, it is also possible to link to it using just the short form features.html. This will only work if the page doing the linking is also on the same website and in the same folder (directory) as "features.html". In the real world, this is like telling someone your home address by merely saying the street name and house number, but omitting other details like the country, state and city. Your friend will automatically assume that your home is in the same country, state and city that you are both in.
To make sure that this is clear, let's use an example. Let's say that you have a web page athttp://www.example.com/products/index.html. On that page, you link to another page with a relative URL of "prices.html". Where does the browser look for that "prices.html" file? The browser first looks at the URL of the current page. In this case, it's "http://www.example.com/products/index.html". It then snips off the filename of the current page ("index.html") to leave behind "http://www.example.com/products/". Then it appends the relative URL, resulting in a new URL "http://www.example.com/products/prices.html".