The World Wide Web is a system of web pages connected through hyperlinks. These are links from one document to another that appear as hypertext. So, let’s understand how you can create these hypertexts along with their different elements.

What Does href Stand for?

The full form of href in HTML is HyperText REFerence.

What is a href in HTML?

Href is the HTML code utilized for linking to another page. It serves as an anchor tag attribute, which also identifies sections within a document. All functional “a elements” must contain the href attribute indicating the destination of the hyperlink. Therefore, with the href, there exist two elements:

The URL, which acts as the direct link, and
The visible text on the page, known as the “anchor text.”

What does the href Attribute look like in HTML?

An href attribute is found within an anchor tag (a) in HTML. For instance, if you want to link to example.com, you would write it in HTML-

<a href=“http://www.example.com” rel=“noopenar” target=“_blank”>Visit Example</a>

This code creates a hyperlink that users can click to go to the specified web address. There are several things you need to keep in mind which is crucial for the link to work:

The link is wrapped in an opening <a> tag as well as a closing </a> tag. All texts placed between these tags are clickable and receive link styling.
The href attribute and its accompanying attributes are written inside the opening <a> tag.
The attribute value of href (inside the quotation marks) is a URL that conveys to the browser where to go when the link is selected.
The additional attributes rel=“noopenar” and target=“_blank” tell the browser to open the web page in a new tab. However, unlike href, these attributes are not mandatory. Therefore, it can also be written as:

<a href=“http://www.example.com”>Visit Example</a>

Therefore, the link above uses an absolute URL to specify a destination on a different website. Apart from this, href can take on other values as well.

What are a href Values?

The most common usage of the href attribute is to link to another web page on the same domain or different domain using the a tag. Href can also be used for different purposes like linking to a different part of the same page or functioning as a different web protocol than HTTPS.

Understanding Absolute URL and Relative URL

An absolute URL refers to a link directing a file on a different website. In essence, it is a URL featuring a distinct domain name from the present page’s URL. For instance, consider the following hyperlink leading to a Google search:

<a href=“https://www.google.com/”>Go to Google search</a>

Regardless of where this link is applied, it consistently directs to the Google homepage, hence it is known as an “absolute” URL. Moreover, it is worth observing how the text of the link describes its function, enhancing accessibility for users employing assistive technologies.

On the other hand, a relative URL denotes a link referencing a file within the same website. For example, here is a link direction to all HTML tags and their functions:

<a href=“https://nextgrowthlabs.com/what-is-html-tags/”>All HTML Tags and Their Function</a>

Notice the variance value- it lacks the HTTPS protocol or the domain name. Omitting this section of the URL prompts the browser to assume that the specified file resides within the same domain as the current age.

These URLs are labeled as “relative” since the destination of the link is outlined relative to the current webpage. If the aforementioned HTML were pasted onto a page of a distinct website, it would not function. The rationale behind utilizing related URLs over absolute URLs lies in their adaptability.

Relative URLs prove advantageous in scenarios where the file path of the linked resource undergoes alterations, such as during website restructuring or domain changes. In such instances, the relative URL remains operational as it solely encompasses the name of the linked resource, not the entire file path.

What are URI Fragments?

Utilize a URI fragment to create a link to a different section within the same webpage. URI fragments commence with the hash (#) symbol, followed by the identifier of the targeted page element. For instance, consider this link directing you to the section with an H2 heading above the current one. The HTML code would be:

<a href=“#section-heading”>this link directs you to the section with an H2 heading above the current one</a>

You can also employ the value #top to navigate visitors back to the topmost section of the page:

<a href=“#top”>return visitors to the top of the page</a>

URI fragments serve a practical purpose for facilitating navigation within a webpage, enabling users to effortlessly move to earlier or later sections of the content. They are particularly beneficial for implementing chapter links or instances where users may need to navigate to different parts of a page.

How to Link to a Specific Part of Another Webpage Using the href Attribute?

Href can link to a specific part of another webpage if that page has defined anchors. YOu can use the URL of the page followed by a hash symbol and the anchor name. For instance, if you want to go directly to “section3” or “page.html” or “example.com” of the other webpage, use the following HTML code:

<a href=“http:www.example.com/page.html#section3”>Section 3</a>

What are the Additional Protocols for a href Attribute?

The absolute URLs and relative URLs previously discussed utilize the HTTP/HTTPS protocol, which is commonly employed for serving pages on the World Wide Web. Nonetheless, it is possible to incorporate other protocols with href as well, such as “mailto:” and “file:.”

For instance, you can click on this link to compose an email to [email protected]:

<a href=“mailto:[email protected]”>[email protected]</a>

The “tel” attribute allows you to create any link that initiates a phone call when clicked on a device capable of making calls. For example, clicking on “Call Us” will start dialing the number +1234567890 when a user clicks on it:

You can also create a link to trigger JavaScript code using the href tags. JavaScript can manipulate href through the document object model (DOM). Therefore, you can use JavaScript to dynamically change the href attribute of an anchor tag, which can prove to be useful for updating links based on user interactions or other conditions within your web appliance. An href example to create a greeting message would be:

<a href=“javascript:alert(‘Hello world’);”>Click here for a greeting</a>

How Does the “nofollow” Value in the ref attribute Work with href?

Using the “nofollow” value within the ref attribute instructs search engines to refrain from tracking a specific link. This implies that the link will not contribute to the search engine’s comprehension of the site’s structure, nor will it transmit any ranking or trust signals. Typically, this attribute is applied to links leading to untrustworthy content or paid links, where an endorsement is not desired.

How does the Target Attribute “_blank” Impact a Link with href?

When the target attribute is set to “_blank,” it compels the link to launch in a new browser tab or window. For instance, you can use the following HTML code:

<a href=”http://www.example.com” target=“_blank”>Visit Example.com</a>

This link will ensure that a user’s current page remains open whereas the link will open in a new tab. This ensures easy return of the user after browsing the linked content.

Can href Be Used to Directly Facilitate File Downloads?

Href can definitely be employed to initiate a file download by specifying the file’s location. To prompt the user to download the file instead of navigating to it, the “download” attribute within the anchor tag can be utilized as:

<a href=“path/to/file”download>Download</a>

Can href Be Used to Link to a File Location within a User’s Local System?

In theory, it is feasible to create a link directing to a file on the local file system utilizing the file protocol:

However, for security considerations, contemporary web browsers often restrict such links when embedded within web pages served over hypertext transfer protocol (HTTP) or hypertext transfer protocol secure (HTTPS) due to the potential for exploitation.

Can href Be Used to Establish a Link to a Live Chat or Messenger Service?

You can use specified uniform resource locator (URL) schemes within href to link to live chat or messenger services. Numerous chat platforms provide custom URL schemes (such as “whatsapp://”) that allow for the initiation of conversations directly from a hyperlink, assuming the user has the relevant application installed.

Is it Possible to Use href for Dropdown Menu Items?

Href is not mandatory if your dropdown menu items trigger other interactions besides navigation, such as revealing additional content or the page or executing a JavaScript function. However, if each item in the dropdown menu is intended to direct the user to a new page, then href would be utilized in those instances.

What Functions Does href Serve in Responsive Design?

While href itself remains unchanged in responsive design, the approach to managing links may vary. In a responsive layout, different links or behaviors may be implemented based on device capabilities. For instance, a “tel” link would be relevant only on a device capable of making calls, and JavaScript might be utilized to modify href values to enhance the user experience across different screen sizes.

Can href Be Differentiated for Visited and Unvisited Links?

Hrefs can be styled differently for visited and unvisited links using cascading style sheets (CSS) and pseudo-class. “.link” can be utilized to style unvisited links, while “:visited” can be employed for visited links. This enables the provision of visual cues to users regarding which links they have previously accessed.

Conclusion

Thus, having a clear understanding of HTML along the <a> element and its accompanying href attribute can help you gain insights into how web pages are tied together. Having adequate knowledge of how href can be used in different instances can help you connect your web pages or elevate user experience, leading to a positive impact.

Understanding a href in HTML