Absolute vs. Relative Paths

Welcome to our free HTML tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.

Contact Us or call 1-877-932-8228
Absolute vs. Relative Paths

Absolute vs. Relative Paths

Absolute Paths

An absolute path shows the complete path to a file starting from the web root. To illustrate this, see the following directory tree:Directory Tree

Assume that the wwwroot folder is the web root. This means that when a user types http://www.servername.com/index.html, the index.html page within the wwwroot folder will be downloaded to the browser. The absolute path to the web root from a page on the same domain is simply a forward slash (/). So, a link on Company.html to index.html could be written like this:

<a href="/index.html">Home Page</a>

The same link could be placed on any page in any folder below the wwwroot folder or on any page in the wwwroot folder itself.

Using an absolute path, a link to Company.html would include the about directory, like this:

<a href="/about/Company.html">About Our Company</a>

External Links

When linking to a file at a different domain you must identify the location of the domain using the domain name (or IP address) of the site. To illustrate, assume that the directory structure shown above is found at http://www.beatles.com. A link to Company.html from another site would be written like this:

<a href="http://www.beatles.com/about/Company.html">
	About the Beatles</a>

See Links/Demos/Links.html for more examples of links with absolute paths.

Relative Paths

Relative paths can only be used to link to other files under the same web root. A relative path indicates where a file is relative to the file that contains the link. The folder (or directory) that contains the file being worked on is called the current directory. The relative path to another file that is also in the current directory is just the name of that file. For example, since Company.html and Contact.html are found in the same directory, they can link to each other simply by specifying the file name. The following shows a link that could be used in Contact.html to Company.html.

<a href="Company.html">About Our Company</a>

The relative path to a file in a subdirectory of the current directory must include the name of the subdirectory. For example, to link to Company.html from index.html you must first point to the about directory, like so:

<a href="about/Company.html">About Our Company</a>

The relative path to a file in a directory above the current directory should begin with ../ For example, the following shows a link to index.html from Company.html.

<a href="../index.html">Home Page</a>

See Links/Demos/Links.html for more examples of links with relative paths.

Default Pages

The web server administrator can set up default page names to look for when a path ends with a directory name without specifying a file. Often these files are called index.html or Default.htm. In this case, the following two URLs would be identical, both loading index.html.


This tutorial is based on Webucator's Introduction to HTML Training Course. We also offer many other HTML Training courses. Sign up today to get help from a live instructor.