Types of URLs Links HTML5

HTML tutorials

Different Types of URL Links | Relative URL

HTML tutorials

There are about 2 different types of URLs in HTML. These are the basic types of URLs:

  • Absolute URLs
  • Relative URLs
  1. Document-Relative
  2. Root-Relative
  • Protocol-Relative (//www.howtocode.pk/myImages/pic.png)

Here we will discuss the relative URL type and its sub types.

Specifying a URL in a hyperlink is very important to send the user to the desired page or file. There are some types of URLs in HTML. The relative URL is relative to the document containing it. To understand more look at the code below.

HTML code example for relative URL:

<p>

This is a paragraph have in relative URL. By clicking on the link created by an anchor tag of <a href=”page1.html”>page 1</a> you will go to the page 1 on this site.

</p>

In the code above we have a paragraph tag which includes the relative link in it. Why this kind of link is called a relative link is because it specifies just the page of file name and the extension. When a browser looks at this kind of URL it looks for the page or file in the current directory. It will have the host and path up to the file name the relative URL has.

Let’s see another example of relative URL. See the code below to get more understanding of relative URLs.

Relative URL Path in Html with Example (Root-Relative):

<p>

This is a paragraph have in relative URL. By clicking on the link of <a href=”subDir/page2.html”>page 2</a> you will go to the page 2 on this site.

</p>

Here we are having the same paragraph with almost the same link exept for the URL. The URL is a kind of relative URL. It is specifying the page that is located in the directory called “subDir”. The directory is located on the current host. The browser will treat it similarly as first relative URL.

Now the third kind of relative URL we should look at. So look at the code below to understand it.

Relative URL in HTML code example (Document-Relative)

<p>

This is a paragraph have in relative URL. By clicking on the link of <a href=”../page3.html”>page 3</a> you will go to the page 3 on this site.

</p>

In the code above we are using the same paragraph. This time it has a relative link that specifies the path of a page which is outside of the current directory of the running page. The “../” notation indicates the folder up one level or outside of the current folder or directory.

Find more relative HTML tutorials here on HowToCode.pk

Comments