Href Tag in HTML

What is the href Attribute?

In HTML, with the help of an anchor tag(<a> tag), we can create a hyperlink between one address and another. For the functionality of the <a> tag, the href attribute must be present inside the <a> tag. The main purpose of the href tag is to indicate the destination address of the hyperlink. Without the href attribute, the <a> tag cannot work.

For a better understanding, looks at the below snippet.

<a href="https://www.javatpoint.com/" rel="noopener" target="_blank" >homepage of javaTpoint</a>

In the above snippet, there are several things that we have to notice. These are as below.

The targeted link is kept inside the <a> tag. The user selects all the text between the tag, and we can provide style to those texts.
The href attribute and all other important attributes must be kept inside the opening tag of the <a> tag.
The value for the href attribute, which is kept inside the double quote, is a URL used to indicate the destination address of the hyperlink.

In the above snipped, the additional attributes target= "_blank" and rel= "noopener." This means the link will be opened in the browser's new tab. These attributes are not necessary as compared to the href attribute.

What are Href Values?

We always see that the link inside the href attribute is opened in the same or different web browser tab. We can also do different things with the help of href attributes. With the help of the href attribute, we can link a different part of the same web page or serve a protocol other than HTTPS. Let's understand the other possible value with some examples.

Absolute URL

With the help of this value, we can target the different domain names on the current webpage. Let's understand this with the help of the following example.

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h2>How to link pages using absolute URL in HTML?</h2>
 <h4>Click the link below to redirect to the official website of javaTpoint</h4>
 <a href="https://www.javatpoint.com/">javaTpoint</a>
</body>
</html>

Output:

Relative URL

With the help of this value, we can set the path of the reference file on the same webpage.

Example 2:

Code for signup page

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h2>Relative link</h2>
  <h3>Sign Up Page</h3>
  <form>
   <label for="fname">Name</label><br>
   <input type="text" id="fname" name="fname" ><br>
   <label for="email">Email</label><br>
   <input type="text" id="email" name="email" ><br>
   <label for="fname">Password</label><br>
   <input type="text" id="fname" name="fname" ><br>
   <label for="lname"> Re-enter Password</label><br>
   <input type="text" id="lname" name="lname" ><br><br>
   <input type="submit" value="Submit"> <a href="./b.html">Login</a>
  </form>
</body>
</html>

Code for login page

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h2>Relative link</h2>
  <h3>Sign In Page</h3>
  <form>
   <label for="fname">Email Address</label><br>
   <input type="text" id="fname" name="fname" ><br>
   <label for="lname">Password</label><br>
   <input type="text" id="lname" name="lname" ><br><br>
   <input type="submit" value="Login"> <a href="./a.html">Sign Up</a>
  </form>
</body>
</html>

Output:

When the user clicks on the login, the below page will be opened.

The relative path does not contain the HTTPs protocol or the domain name. When the URL is absent in the path, the browser thinks it is a path for the specified file.

We call this path a relative path because the link of the destination is defined relative to the current web page.

URI Fragment

The URI fragment is a different part of the current web page. It starts with the symbol "#" and then contains the desired page element. We can also write the anchor tag for any portion of the HTML code.

Additional Protocols

The relative and absolute paths use the HTTP or HTTPS protocols. We can also use other protocols with href attributes like mailto: and file: Let's understand this with the help of the below example.

Example 3:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h2>Welcome to javaTpoint</h2>
 <h4>Click the below mail to send the feedback.
  <a href="mailto:feedback@javatpoint.com">Send Email</a>
 </h4>
</body>
</html>

Output: