Relative link

When creating links, we need to reference the files with each file's location, known as file's path. HTML supports two kinds of file paths: relative and absolute. A relative path refers to a file's location that is relative to the folder in which the file is in. A relative link is the easiest kind of link to create since you only need to reference the file name (because the file is in the same directory).

Let say on ScriptingMaster.com's website there is one folder called html and it has two web page files saved as: headings.asp and paragraph.asp. See figure 1 below as an illustration. To create a link in headings.asp to the paragraph.asp file, we will use just the filename. Specifically, link tag will look something like:

<a href="paragraph.asp">How to create a paragraph</a>

Recall that a link tag is created with an anchor tag <a>. The href property contains the destination file. In the example above the destination file is paragraph.asp. The text "How to create a paragraph" is the link text, the text that activates the link when clicked. Output: How to create a paragraph.

Relative Link
Figure 1 Relative Link

A link to a file within the same folder. The HTML folder in this illustration has two files: headings.asp and paragraph.asp. Linking one of these files to another is an example of a relative link.

How does the link work without a fully qualified URL? The current URL (http://www.scriptingmaster.com/html/headings.asp) of the page helps the browser figure out the new URL (http://www.scriptingmaster.com/html/paragraph.asp). How? With a relative link, the browser assumes any information you leave out when creating the link is equivalent to the information it used to get to the current page. So if we are accessing http://www.scriptingmaster.com/html/headings.asp and this page has a link to paragraph.asp, and when we click on this link, the browser will access http://www.scriptingmaster.com/html/paragraph.asp. So in the new URL, only piece of information changed is just the file name: from headings.asp to paragraph.asp. Thus with relative links, we can link to files in the same directory by just using their file names.