An In-Depth Guide to HTML’s href Attribute

The World Wide Web has various pathways that lead to different destinations. It is the humble hyperlink that serves as our guide, taking us from one document to another, making the browsing experience seamless.

This process, which we take for granted, is made possible by the HTML <a> element, paired with the href attribute. This comprehensive guide will show you how the a href attribute works in HTML, helping you to create seamless pathways on your webpages.

What the HTML a href Attribute Does and Why You Need It

Before you get deep into the complexities of the href attribute, we must first understand the function of the ‘a’ (anchor) element in HTML. Acting as the cornerstone for hyperlink creation, it connects one web address to another. The inclusion of the href (hypertext reference) attribute within the opening ‘a’ tag is essential for the ‘a’ element to function as a hyperlink. The href attribute sets the course of the hyperlink, providing the user with a pathway to their chosen destination.

Consider this HTML snippet for a link leading to Linkilo’s homepage:

<a href="https://www.linkilo.co/" rel="noopener" target="_blank" >homepage of Linkilo</a>

Several key features can be noted here:

The link text, “homepage of Linkilo”, is wrapped within the opening and closing <a> tags. Any text within these tags becomes clickable and styled as a hyperlink.

The href attribute, along with associated attributes, is placed within the opening <a> tag.

The value of the href attribute, enclosed within quotation marks, is a URL that directs the browser to the desired location when the link is clicked.

Additional attributes, such as target=”_blank” and rel=”noopener”, instruct the browser to open the linked webpage in a new tab.

Different Types of a href Values You Can Use on Your Website

Though the href attribute is frequently used to link webpages on the same domain or different ones, its utility extends further. It can link to different sections of the same page, or serve a different web protocol other than HTTPS. Let’s get into these variations.

How Absolute URLs Work When You Link to Other Websites

An absolute URL directs to a specific file on another website. It’s a URL that includes a different domain name from the current page’s URL. Here’s an example:

<p>Here's another example: <a href="https://www.linkilo.co/blog">Visit Linkilo's Blog</a>.</p>

This link always directs the user to Linkilo’s blog page, irrespective of where it’s placed.

How Relative URLs Connect Pages Within Your Same Website

Contrasting with the absolute URL, a relative URL points to a file on the same website. Here’s an example of a relative URL:

<p>For more information, check our <a href="/support">Support Page</a>.</p>

Here, the URL doesn’t include the protocol HTTPS or the domain name. The browser assumes that the referenced file is located on the same domain as the current page. If this code is placed on a different website, it will not work as expected.

How URI Fragments Jump to Specific Sections on the Same Page

A URI fragment, initiated with a hash (#) symbol followed by the id of the target page element, lets you direct users to a different section of the same page.

<p>For example, <a href="#section1">this link directs you to Section 1 of this page</a>.</p>

A URI fragment can also be used to send users back to the start of the page:

<p>You can also use the value <strong>#top</strong> to <a href="#top">send visitors back to the top of the page</a>.</p>

Alternative Protocols Beyond HTTP and HTTPS That You Can Use

The href attribute isn’t just confined to HTTP/HTTPS protocol. It can also work with other protocols like mailto: and file:.

<p>For any queries, send an email to <a href="mailto:[email protected]">[email protected]</a>.</p>

How to Execute JavaScript Code Through href Links

Another potential use of href is to trigger JavaScript code:

<a href="javascript:alert('Welcome to Linkilo!');">Click here for a warm welcome</a>

Security Features You Should Know About

When you create links, especially those that open in new tabs, you need to protect your users and your website from potential security risks.

The rel="noopener" attribute prevents the new page from accessing your original window. This stops malicious websites from redirecting your users back to fake versions of your site.

<a href="https://external-site.com" target="_blank" rel="noopener">Safe external link</a>

Use rel="nofollow" when you link to content you don’t want to endorse, like user-generated content or paid links. Search engines won’t count these as votes for the linked site.

<a href="https://user-submitted-link.com" rel="nofollow">User shared link</a>

The rel="noreferrer" attribute prevents the browser from sending information about where the user came from. This protects user privacy.

<a href="https://private-link.com" rel="noreferrer">Private link</a>

How to Make Links Accessible for All Users

Screen readers and other assistive technologies need clear, descriptive link text to help users understand where links lead.

Write link text that makes sense when read alone. Avoid generic phrases like “click here” or “read more.”

<!-- Bad -->
<a href="/report.pdf">Click here</a> to download our annual report.

<!-- Good -->
<a href="/report.pdf">Download 2023 annual report (PDF)</a>

Use ARIA labels when you need to provide additional context:

<a href="/contact" aria-label="Contact us via email or phone">Contact</a>

Make sure your links have enough color contrast and don’t rely only on color to indicate they’re clickable.

How Links Affect Your Search Engine Rankings

Search engines follow links to find and understand your content. Different types of links send different signals.

Internal links help search engines understand your site structure and find all your pages. Use descriptive anchor text that includes relevant keywords.

<a href="/seo-guide">Complete SEO guide for beginners</a>

External links to high-quality sites can improve your credibility, but use rel="nofollow" for sponsored content or untrusted links.

Links that open in new tabs can reduce your bounce rate, but they can also frustrate users who lose their back button functionality.

Performance Tips for Better Loading Speed

You can help browsers load linked resources faster with resource hints.

Use rel="prefetch" to load pages users will likely visit next:

<a href="/next-page" rel="prefetch">Continue reading</a>

Use rel="preload" for critical resources needed immediately:

<link rel="preload" href="/critical-font.woff2" as="font" type="font/woff2" crossorigin>

Avoid linking to slow external resources in critical parts of your page, as they can delay your site’s loading.

What Happens When Links Break

Broken links create poor user experiences and can hurt your search rankings. Plan for common link problems.

Always test external links before publishing. External sites change their URLs or go offline without notice.

For downloadable files, include file type and size information:

<a href="/manual.pdf">User manual (PDF, 2.1MB)</a>

Set up 404 error pages that help users find what they were looking for when links break.

Monitor your external links regularly and update or remove broken ones.

How Links Work in Single Page Applications

Single Page Applications (SPAs) handle navigation differently than traditional websites. Links might not cause full page refreshes.

Many JavaScript frameworks intercept link clicks and update content without reloading the page. This makes sites feel faster but can break some traditional link behaviors.

When building SPAs, make sure your links still work for users who have JavaScript disabled or for search engine crawlers.

Use proper href values even in SPAs so links work correctly when shared or bookmarked:

<a href="/products/laptop-stand">View laptop stand</a>

Mobile and Touch Considerations

Mobile users interact with links differently than desktop users. Touch targets need to be large enough for fingers.

Make clickable areas at least 44×44 pixels for comfortable tapping. This often means making the padding around link text larger.

a {
    padding: 12px 16px;
    display: inline-block;
}

Avoid placing links too close together, as users might accidentally tap the wrong one.

Consider how links behave on hover versus touch. Hover effects don’t work the same way on touch devices.

Best Practices for Link Usage

Open links in new tabs sparingly. Most users prefer to control their own browsing experience. Only use target="_blank" when users need to keep your page open, like when filling out forms or during checkout processes.

Write clear, specific link text. Users should know exactly what will happen when they click.

<!-- Unclear -->
<a href="/signup">Learn more</a>

<!-- Clear -->
<a href="/signup">Sign up for free account</a>

Group related links together and separate different types of links visually.

Test your links on different devices and browsers to make sure they work correctly.

Browser Differences You Should Know

Most modern browsers handle href attributes consistently, but there are a few differences to watch for.

Older versions of Internet Explorer handle some protocols differently. If you need to support very old browsers, test your links thoroughly.

Mobile browsers sometimes have different behaviors for tel: and mailto: links. Some will ask users which app to use, while others will use default apps automatically.

<a href="tel:+1234567890">Call us: (123) 456-7890</a>
<a href="mailto:[email protected]">Send email</a>

Some browsers block javascript: links by default for security reasons.

How to Validate Your href Values

Malformed URLs can break your links or cause unexpected behavior. Follow these guidelines to avoid problems.

Always include the protocol (http:// or https://) for external links:

<!-- Wrong -->
<a href="www.example.com">External site</a>

<!-- Right -->
<a href="https://www.example.com">External site</a>

Encode special characters in URLs properly:

<a href="/search?q=html%20tutorials">Search results</a>

Test all your links before publishing content. Use tools or manual testing to verify they work correctly.

Check that internal links point to pages that actually exist on your site.

Conclusion

The process through the web is made possible by the diligent efforts of the <a> element and the href attribute. As you continue to explore HTML, understanding these elements is paramount to creating functional and impactful websites. Learn these elements, and you are one step closer to seamlessly guiding users through your webpages.