Absolute and Relative URLs

  • Absolute − An absolute URL is the complete address of a resource. For example 
  • Relative − A relative URL indicates where the resource is in relation to the current page. THE given URL is added with the <base> element to form a complete URL. For example /html/html_text_links.htm

The subsections that follow provide a summary of the different types of relative URLs you can use.

  • Same Directory When you want to link to, or include, a resource from the same directory, you can just use the name of that file. For example, to link from the homepage ( index.html ) to the “ contact us ”  page ( contact us. html ), you can use the following:  contactUs.html

Subdirectory :

You must include the name of the subdirectory, followed by a forward slash character, and the name of the page you want to link to. For example : Film/index.html.
Parent Directory :

If you want to create a link from one directory to its parent directory (the directory that it is in), you use the ../ notation of two periods or dots followed by a forward slash character. For example : ../index.html . Each time you repeat the ../ notation, you go up another directory.
From the Root : It is also possible to indicate a file relative to the root folder of the site. So, if you wanted to link to the contactUs.html page from any page within the site, you use its path preceded by a forward slash. For example, if the Contact Us page is in the root folder, you just need to enter. For example : /contactUs.html . The forward slash at the start indicates the root directory, and then the path from there is specified.
The < base > Element
When a browser comes across a relative URL, it actually transforms the relative URL into a full absolute URL.
The < base > element allows you to specify a base URL for a page that all relative URLs will be added to when the browser comes across a relative URL.
You specify the base URL as the value of the href attribute on the < base > element. For example, you might indicate a base URL for as follows:
< base href=”” />
In this case, a relative URL like this one: Entertainment/php/index.html ends up with the browser requesting this page:
Apart from the href attribute, the only other attribute an < base > element can carry is the id attribute.


Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.