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.
To gain a clearer comprehension, review the snippet provided below.
<a href="https://logic-practice.com/" rel="noopener" target="_blank" >homepage of our site</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.
Within the code snippet provided, there are extra attributes included: target="_blank" and rel="noopener". These attributes indicate that when the link is clicked, it will open in a new tab within the browser. While these attributes offer functionality, they are not compulsory in contrast to the essential href attribute.
What are Href Values?
It is a common practice to determine whether the link specified in the href attribute should open in the current browser tab or a new tab. The href attribute offers various functionalities beyond this, such as navigating to a different section within the same webpage or accessing a protocol other than HTTPS. Let's explore additional potential implementations of the href attribute through illustrative examples.
Absolute URL
Utilizing this value allows us to pinpoint various domain names present on the current web page. To illustrate, consider the example provided below.
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 our site</h4>
<a href="https://logic-practice.com/">C# Tutorial</a>
</body>
</html>
Output:
Relative URL
By utilizing this value, we are able to establish the location of the reference file within 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:
Upon clicking the login button, the following page will be displayed.
The relative path does not include the HTTPS protocol or the domain name. In cases where the URL is not included in the path, the browser interprets it as the path to a particular file.
This type of path is referred to as a relative path since the destination link is specified in relation to the current webpage.
URI Fragment
The URI fragment represents a distinct section of the existing webpage, identified by the "#" symbol followed by the specific page element. It is also possible to create an anchor tag for a specific section within the HTML markup.
Additional Protocols
HTTP or HTTPS protocols are utilized in relative and absolute paths. Other protocols such as mailto: and file: can also be employed with href attributes. To further clarify, let's examine the following 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 our tutorial</h2>
<h4>Click the below mail to send the feedback.
<a href="mailto:feedback@example.com">Send Email</a>
</h4>
</body>
</html>
Output:
Explanation:
When the user interacts with the "send mail" button in the provided code snippet, it triggers the automatic opening of the mail application.