Relative URL

Understanding Relative URLs

A relative URL points to a file or directory in relation to the current file or directory. Unlike absolute URLs, which specify the exact location of a file on the internet, relative URLs provide a path based on the position of the current file. This makes them flexible and easy to use when building websites, as they allow for easy linking between pages or resources within the same site.

Let’s walk through an example to understand how relative URLs work.

Exercise: Using Relative URLs

Imagine we have a page called relative_and_absolute_urls.php3 stored in the design directory of the domain www.webdevelopersnotes.com. We want to include (or display) an image called email.gif, which is stored in the images directory of the same domain.

There are two ways to reference this image:

• Using an Absolute URL: An absolute URL specifies the full path to the resource, including the protocol (http or https), domain, and the path to the file. The <img> tag using an absolute URL would look like this:

<img src="https://www.webdevelopersnotes.com/images/email.gif" alt="Email Icon">

• Using a Relative URL: A relative URL specifies the path relative to the current document's location. Since relative_and_absolute_urls.php3 is in the design directory, and the images directory is at the root level, the relative path would be:

<img src="../images/email.gif" alt="Email Icon">

Understanding Relative Paths and URLs

Relative paths change depending on the location of the page where the link is used. Here are some rules for creating links using relative paths:

• Links in the Same Directory: If the resource is in the same directory as the current page, you only need to specify the filename.
  

<a href="filename.html">Link to the same directory</a>

• Links to Subdirectories: If the resource is in a subdirectory of the current directory, include the subdirectory in the path.

<a href="subdirectory/filename.html">Link to a subdirectory</a>

• Links to Parent Directories: If the resource is in the parent directory, use ../ to move up one level.

<a href="../filename.html">Link to a parent directory</a>

Determining the Relative Path

Let’s go through the steps to determine the correct relative path for linking resources:

• Identify the Location of the Current Page: Suppose your current page is located at /library/weekly/article.html.
• Identify the Location of the Target Resource: The resource you want to link to is located at /library/beginning/index.html.
• Compare the Locations: To reach the beginning directory from the weekly directory, you first need to move up one directory to /library, and then move down into the beginning directory.
• Construct the Relative Path: The correct relative path would be:

<a href="../beginning/index.html">Go to Beginner's Resource Center</a>

Example Scenarios

• Link to a File in the Same Directory: <a href="contact.html">Contact Us</a>
• Link to a File in a Subdirectory: <a href="products/product1.html">View Product 1</a>
• Link to a File in a Parent Directory: <a href="../about-us.html">About Us</a>
• Link to a File Two Levels Up: <a href="../../home.html">Home</a>

Why Use Relative URLs?

Relative URLs are particularly useful when moving your website from one domain to another, or when changing the directory structure. Since relative URLs do not depend on a specific domain or absolute path, they make your code more portable and easier to maintain.

By mastering relative URLs, you can create more dynamic and flexible websites that are easier to manage and navigate.