Difference between absolute and relative url in html

posted inTech articles on by

HTML is the basic markup language for any web page on the internet. HTML structure’s the web document with predefined tags and attributes. Many web visitors found HTML an easy markup language to understand and learn. But from the developer/designer prospective HTML is the key language which lays the foundation for their web projects.

On this note i want to share the key difference between absolute and relative URL in HTML. Many of us also confused about the word “URL” because this word has different short forms in many reference books such as “Uniform Resource Identifier” and “Universal Resource Locator“. But apart from this its core meaning remains same to find any resource on the web. Every URL contains few components which makes a complete URL such as:

  1. Scheme name(we usually denote this with a protocol like ‘HTTP’).
  2. A colon with two slashes.
  3. A domain name(we can also use IP address in place of domain name).
  4. A port number(which is optional part).
  5. Full path of the file on the web.

absolute and relative url html

Note: URL refers to the Uniform Resource Locator, which locates the resource on the web. It is particularly used with the ‘HTTP’ protocol.

Types of URL in HTML

Absolute URL:  Mostly we use absolute URL on the internet while surfing. Absolute URL has a unique syntax & contains fully qualified domain name and path such as:

http://www.domain.com/aboutus.html

Above mentioned syntax of the URL is familiar to many readers. Many of us also use and see these kinds of URL’s daily on the internet. Absolute URL is mostly used in navigating any specific domain on the internet.

Note: For developers/designers who worked on their projects by installing local server, Absolute URL is not the right choice for building links. One can use Relative URL in their projects instead of absolute URL.

Relative URL: Relative URL is familiar to those readers who worked locally(Personal computer) on the project. It does not contain fully qualified domain name and path as like absolute URL. For building links one must choose relative URL for their projects locally. We use relative URL in HTML with this much familiar syntax.

<a href = "somefile.php">services</a>

Note: I recommend to use absolute URL in projects wherever possible to avoid missing links,relative canonical URL and other project issues.

Uploaded by: Author