How to use ./, ../ and / in HTML for src and href attributes

In this blog post, we will learn how to use different types of paths in HTML for the src and href attributes. These attributes are used to link external resources, such as images, scripts, stylesheets, or other web pages, to the current HTML document.

There are three main types of paths that we can use:

- Absolute paths: These start with a / character and specify the full URL of the resource, including the protocol, domain name, and directory structure. For example: /images/logo.png or https://example.com/images/logo.png. Absolute paths are useful when we want to link to a resource that is hosted on a different server or domain than the current web page.

- Relative paths: These do not start with a / character and specify the location of the resource relative to the current web page. For example: images/logo.png or ../images/logo.png. Relative paths are useful when we want to link to a resource that is hosted on the same server or domain as the current web page, and we want to avoid repeating the common parts of the URL.

- Root-relative paths: These start with a / character but do not specify the protocol or domain name of the resource. For example: /images/logo.png. Root-relative paths are useful when we want to link to a resource that is hosted on the same server or domain as the current web page, but we want to avoid using relative paths that depend on the directory structure of the web page.

Let's see some examples of how to use these types of paths in HTML for the src and href attributes.

Example 1: Linking an image with an absolute path

Suppose we have an image file called logo.png that is hosted on https://example.com/images/logo.png. We can link this image to our HTML document using an absolute path for the src attribute, like this:

<img src="https://example.com/images/logo.png" alt="Logo">

This will display the image on our web page regardless of where our HTML document is located.

Example 2: Linking an image with a relative path

Suppose we have an image file called logo.png that is hosted on the same server and domain as our HTML document, and both files are located in the same directory called images. We can link this image to our HTML document using a relative path for the src attribute, like this:

<img src="logo.png" alt="Logo">

This will display the image on our web page as long as our HTML document is located in the images directory.

Example 3: Linking an image with a root-relative path

Suppose we have an image file called logo.png that is hosted on the same server and domain as our HTML document, but the image file is located in a different directory called images, while our HTML document is located in a directory called pages. We can link this image to our HTML document using a root-relative path for the src attribute, like this:

<img src="/images/logo.png" alt="Logo">

This will display the image on our web page regardless of where our HTML document is located, as long as it is on the same server and domain as the image file.

Example 4: Linking another web page with an absolute path

Suppose we have another web page called about.html that is hosted on https://example.com/about.html. We can link this web page to our HTML document using an absolute path for the href attribute, like this:

<a href="https://example.com/about.html">About us</a>

This will create a hyperlink on our web page that will take us to the about.html page when we click on it.

Example 5: Linking another web page with a relative path

Suppose we have another web page called about.html that is hosted on the same server and domain as our HTML document, and both files are located in the same directory called pages. We can link this web page to our HTML document using a relative path for the href attribute, like this:

<a href="about.html">About us</a>

This will create a hyperlink on our web page that will take us to the about.html page when we click on it, as long as our HTML document is located in the pages directory.

Example 6: Linking another web page with a root-relative path

Suppose we have another web page called about.html that is hosted on the same server and domain as our HTML document, but the web page is located in a different directory called pages, while our HTML document is located in a directory called blog. We can link this web page to our HTML document using a root-relative path for the href attribute, like this:

<a href="/pages/about.html">About us</a>

This will create a hyperlink on our web page that will take us to the about.html page when we click on it, regardless of where our HTML document is located, as long as it is on the same server and domain as the web page.

Conclusion

In this blog post, we have learned how to use different types of paths in HTML for the src and href attributes. We have seen that absolute paths specify the full URL of the resource, relative paths specify the location of the resource relative to the current web page, and root-relative paths specify the location of the resource relative to the root of the server or domain. We have also seen some examples of how to use these types of paths in HTML for linking images and web pages.

We hope you have found this blog post helpful and informative. If you have any questions or feedback, please feel free to leave a comment below. Thank you for reading!