Absolute vs Relative Links in HTML: What’s the Difference and When to Use Each

INTRODUCTION

The URL (Uniform Resource Locator) is the address used to access resources on the internet. Resources can be web pages, images, videos, or documents on a web server. It tells the browser where to find a specific resource and how to retrieve it. A URL is like a postal address for a resource — it provides a precise location on the internet, just as an address helps people find a specific place in the real world.

URL Structure

A URL consists of various components, some of which are mandatory, while others are optional. Below is an illustration of the basic parts of a URL.

• scheme : The first component of a URL is the scheme, which specifies the protocol the browser should use to request the resource. A protocol is a defined method for transmitting data over a network. For websites, the most common protocols are HTTPS or HTTP.
• domain : The domain specifies the web server being requested. Typically, this is a domain name, though an IP address can also be used—however, this is less common since it's not as user-friendly. IT is separated from the scheme by the character pattern ://. A domain consists of multiple subparts, structured hierarchically from right to left. The main subparts include:
• Top-Level Domain (TLD) – The rightmost part of a domain, indicating its category or country. Examples: .com, .org, .net, .gov, .edu, .uk, .jp
• Second-Level Domain (SLD) – The main part of the domain, typically representing a brand or organization. Example: In example.com, "example" is the SLD.
• Subdomain (Optional) – A prefix that organizes sections of a website. Example: In blog.example.com, "blog" is a subdomain.
• port: The port specifies the technical "gate" through which resources on the web server are accessed. It is typically omitted when the server uses the default ports for the HTTP protocol (port 80 for HTTP and port 443 for HTTPS). However, if a non-standard port is used, it must be explicitly included in the URL.
• Path: It is the path to the resource on the Web server
• parameters: Parameters in a URL appear after a "?" and are used to pass information to the web server. These are often called query parameters and are structured as key-value pairs. Multiple parameters are separated by an "&" symbol.
• Anchor: They specify a particular location on the webpage, generally an ID attribute on webpage. The browser will scroll to and display the section where the anchor is located. It's important to note that the portion after the '#', known as the fragment identifier, is not included in the request sent to the server.

URL Types

When selecting URLs, you have two main options: absolute URLs and relative URLs. What we saw above is known as an absolute URL. We will see each type in detail along with its advantages and disadvantages.

Absolute URL

As discussed above an absolute URL is a complete web address that includes all necessary components to locate a resource on the internet. It can include all the above discussed components.

Advantages of Absolute URL

• Eliminate duplicate content: Multiple versions of a website often exist, with the most common being the HTTP and HTTPS versions. Absolute URLs solve this problem by always pointing to the HTTPS version on your site.
• discourages website scraping: Web scraping is the process of automatically extracting data from websites using software or scripts. It can be used to duplicate data and host it on different domain. Absolute URLs discourages scraping because the URLs still points to original website. Scrapers can duplicate content by changing the URL of internal links but it requires more efforts.

Disadvantages of Absolute URL

• Changing Domain Name is difficult: When you wish to change your brand name you need to change the all the absolute URLs to new URL or you have to redirect it which is a very lengthy process.
• Developing Website is difficult: When you are in development phase of website you often work on different server generally testing server which has different domain. If Absolute URL is used you need to change All domains from testing server to actual live server when you want to publish the site.

Relative URL

A relative URL is a partial web address that specifies a resource's location relative to the current document or domain. It does not include the protocol (http:// or https://) or domain name and includes only path, making it shorter and more flexible for internal links.

Rules for Forming Relative URL

1. The current directory of the base URL is the URL string up to the last forward slash (/).

Example:

https://example.com/products/electronics/ 
https://example.com/products/electronics/mobiles

In the above examples the current directory for both the URLs is "electronics". In the second URL there is no forward slash after 'mobiles' so it is not the current directory.

2. Current Directory

An ./ or no prefix in relative URL points to the current directory of Base URL. So technically ./charger and charger both point to same location in current directory.

Example:

Base URL: https://example.com/products/electronics/ 
Relative URL: ./charger
Resolves to : https://example.com/products/electronics/charger

Base URL: https://example.com/products/electronics/mobiles 
Relative URL: charger
Resolves to: https://example.com/products/electronics/charger

In the second example there is no forward slash after 'mobiles' so it is not the current directory. The current directory for Second example is "electronics".

3. Parent Directory

An ../ in relative URL points to the Parent directory of current directory in Base URL.

Example:

Base URL: https://example.com/products/electronics/ 
Relative URL: ../electricals
Resolves to: https://example.com/products/electricals

4. Root Directory

An / in relative URL points to the Root directory in Base URL.

Example:

Base URL: https://example.com/products/electronics/ 
Relative URL: /orders
Resolves to: https://example.com/orders

Advantages of Relative URL

• page speed: Relative URLs improve page speed because they point to resource within same server.
• Ease of domain change: Relative URLs simplify the process of moving a website to a new domain or directory by eliminating the need to update all links.
• Ease of Deployment: Relative URLs makes easy the process of Deploying site form testing environment to live server.
• Shorter code: Relative URLs are typically more concise and readable, resulting in cleaner and more manageable code.

Disadvantages of Relative URL

• Potential for broken links: If the website structure undergoes major changes, relative links may lead to incorrect locations, resulting in broken links.
• external linking: Relative URLs cannot link to resources on other domains, which may restrict their usefulness in certain scenarios.
• Duplicate content issues: Multiple versions of a website often exist, with the most common being the HTTP and HTTPS versions. Relative URL does not resolve this issue and search engine will mistake it for duplicate content.
• Vulnerability to scraping: Relative URLs reference only the site structure, making it easier for web scrapers to duplicate an entire website by simply replacing the domain.

Frequently Asked Questions (FAQ)