The HTML anchor <a href="..."></a> tag?

The HTML <a> tag is used to form a connection to another webpage or location. It is one of the most widely used elements in HTML and is essential for linking two webpages. The <a> tag has an attribute referred to as href, which stands for Hypertext Reference. This attribute is employed to specify the Uniform Resource Locator (URL) or address of the page that the link should point to.

The href attribute is necessary for all links and must be included in the opening <a> tag. The value of the href attribute should be a legitimate URL, such as a web page address or an email address. For instance, if you wished to create a link to Google’s homepage, you would use the following code:

<a href="https://www.google.com/">Google</a>

This HTML code will generate a hyperlink with the caption ‘Google’ and when clicked, it will direct the user to the home page of Google. You can also make use of relative URLs in the href attribute, which are URLs that don’t include a domain name (e.g. ”https://www.google.com/”). Relative URLs are beneficial when linking pages on the same website, as it eliminates the need to enter the complete URL every time. For example:

<a href="/about">About Us</a>

More about the Absolute and Relative hrefs later.

The above code will result in a link that reads ‘About Us’ and when this is clicked, it will direct the user to the “about us” page of the website (if it exists).

Apart from links, the href attribute can also be utilised with other HTML components such as images and buttons, permitting them to act as links when clicked by users. For example:

<a href="">
  <img src="path-to-img" alt="" />
</a>

Absolute and Relative urls:

It is the full path of a resource which is linked to the anchor element, as mentioned above above Google’s url.

But here is the most important thing. The links which start from the ”/” are aften referred to as the relative url in the context of the same root resource, let’s understant it with the help of an example:

If the root resource is https://www.google.com then if we use /about in href it will be called as the relative url. Let me ask you a question now:

Being on Google’s about page what if we have href="/about/something is this the relative or the absolute path? If you said relative you are right and if you said absolute you are wrong. No, I was just kidding that is not the case. It actually depends on the context. Considering Google’s homepage as root the above href is relative but if we consider about page as root then no doubt that the above href is absolute. Hope you got the gist.

Now I am going towords the conclusion of this topic which was the reason for the existance of this task.

If you are familiar with the Link component used in various next like frameworks we use it instead of the <a> tag in those frameworks so as to locate the internal resources. But most of the developers make this mistake of ommiting the ending slash eg) writing href="/about" instead of href="/about/" this causes a huge issue. When you use the relative link inside the about page you may say href="./something" and expect the resulting url be “/about/something” but you get just “/smonething” resulting in 404 page or some other page.

So to conclude I may say that you always use the ending slash, never omit it, it is really important if you want to use the relative urls.