The Ultimate Guide to the HTML <a href> Attribute

Links are the foundation of the World Wide Web. In fact, you could argue that without links, there would be no web at all. The ability to link pages and resources together into an interconnected web of information is what gives the internet its power.

The latest research shows there are now over 1.9 billion websites on the internet, containing over 130 trillion individual web pages. Each of those pages contains an average of 61 outgoing links. That‘s nearly 8 quadrillion total links!

Links have been a fundamental part of the web since its inception. In 1989, Tim Berners-Lee laid out his vision for "a ‘web‘ of notes with links between them" that would help CERN physicists share information. In 1990, Berners-Lee specified HTML (HyperText Markup Language) to structure pages and HTTP (HyperText Transfer Protocol) to link them together.

At the heart of Berners-Lee‘s concept was the hyperlink, which he implemented in HTML as the <a> element (short for "anchor") with the href (hypertext reference) attribute. The a href attribute specifies the destination of the link – where it should take you when clicked. Over 30 years later, the a href is still the primary way we link pages together on the web.

Let‘s take an in-depth look at how to use the a href attribute in HTML to create effective links that will help users navigate your website.

Anatomy of an HTML Link

Here is the basic syntax for a hyperlink in HTML:

<a href="https://www.example.com">Link text</a>

There are three key components here:

  1. The opening <a> tag, which marks the start of the link
  2. The href attribute, which specifies the link‘s destination
  3. The link text (or link label), which appears between the opening and closing tags and indicates where the link goes

When the link is clicked, the browser navigates to the URL specified in the href attribute, loading it in the current tab/window. You can make any text or other inline HTML elements like images into a link by wrapping them with an <a> element. For example:

<p>To learn more, <a href="/about">read about our company</a>.</p>

<a href="/products">
  <img src="widget.jpg" alt="Widget Pro">
</a>

Absolute vs. Relative URLs

There are two types of URL you can use in the href attribute:

  1. An absolute URL points to a location defined by its absolute location on the web, including the protocol and domain name. For example: https://www.example.com/full/url/path.

  2. A relative URL points to a location that is relative to the file you are linking from. It assumes the protocol and domain name of the current page. For example: /products.

In general, you should use absolute URLs when linking to pages outside your own website, and relative URLs for internal links. However, you may opt for absolute URLs internally if you want to avoid broken links when HTML files are moved.

Linking to an Email Address

Besides web pages, you can also use the href attribute to link to other resources like email addresses. To create an email link, use the mailto: scheme followed by the email address:

<a href="mailto:[email protected]">Email us</a>

When clicked, this link will open the user‘s default email client and pre-fill the To: field with the linked email address. You can also include other fields like the email subject, CC, and body text in the mailto URL:

<a href="mailto:[email protected]?subject=Inquiry&body=Dear%20sales%20team">Email us</a>

Just be sure to encode any special characters in the URL. Also keep in mind that email links may have lower click-through rates on mobile devices where email apps are not always configured by default.

Linking to a Telephone Number

Similarly, you can use the tel: scheme to link to a phone number:

<a href="tel:+15555555555">Call us at 555-555-5555</a>

Clicking this link on a mobile device will prompt the user to call the number using their dialer app. On desktop, the behavior may vary. Some browsers and operating systems support the tel: scheme, while others may do nothing or try to initiate a VOIP call using a service like Skype or FaceTime.

Linking to a Resource for Download

To link to a file that should be downloaded rather than opened in the browser, use the download attribute along with the file URL in the href:

<a href="/docs/file.pdf" download>Download our guide (PDF)</a>

This will prompt the user to save the linked file to their device. You can also specify a value for the download attribute to suggest a filename for the downloaded file.

Note that for security reasons, you can only trigger a download for same-origin URLs or data: URLs.

Best Practices for Using HTML Links

Follow these tips and recommendations to get the most SEO and user experience value from your links:

1. Use meaningful link text

The link text, or anchor text, is one of the most important elements for SEO. It gives both users and search engines contextual information about what‘s being linked to. Avoid generic link text like "click here" or "read more" and instead describe the destination page.

Good link text is:

  • Concise: Aim for a few words that fit naturally into the surrounding text
  • Descriptive: Use keywords that reflect the page you‘re linking to
  • Relevant: Don‘t use link text that has no relation to the link destination
  • Unique: Don‘t use the same link text for multiple different destinations

2. Open external links in a new tab

When linking to a page on a different website, it‘s a good idea to have the link open in a new tab or window so users don‘t unintentionally navigate away from your site. You can do this by adding the target="_blank" attribute to the a element:

<a href="https://www.example.com" target="_blank">Example</a>

For security, you should also add rel="noopener" any time you use target="_blank". This prevents the new page from accessing window.opener and potentially redirecting your page to a malicious URL.

3. Make links visually distinct

Don‘t make users guess what‘s clickable. Color alone is not sufficient to distinguish links from regular text, especially for colorblind users. Underlines are the most common and recognizable signifier for links.

Whatever style you choose, be sure to:

  • Use a color that contrasts with the background and surrounding text
  • Use a consistent style for links across your site
  • Provide a hover state so users know when their mouse pointer is over a link

4. Ensure links are accessible

Screen reader users often navigate by links, so link text needs to make sense out of context. Avoid link text that just says "here" or "read more".

Other tips for accessible links:

  • Don‘t put links in divs or other elements that aren‘t inherently focusable
  • Ensure there is a visible focus state for links when navigating by keyboard
  • Provide "skip links" that allow users to bypass long lists of links
  • Don‘t make the clickable link area too small

5. Prioritize important links

Use the a href attribute sparingly and only link to pages that are truly relevant to your content. Stick to important navigational links in your headers/footers and links that provide additional context for the current page.

Excessive linking makes your content harder to read and dilutes the SEO value of each individual link. A good rule of thumb is to use no more than one link per paragraph of text. Place the most important links higher up in the page content.

6. Monitor your links

According to recent estimates, the average lifespan of a web page is just 92 days. And links are one of the first things to break. A 2021 study found that the percentage of "dead" links on the web has grown from 28% in 1998 to over 50% today.

To combat link rot on your site, be sure to:

  • Use stable, trusted domains for external links
  • Update internal links whenever you rename, move, or delete pages
  • Regularly audit your site using an automated link checker
  • Set up 301 redirects for any dead links that can‘t be updated

The Future of HTML Links

The web and the way we link pages continues to evolve. While the fundamental a href syntax remains the same, several new developments in recent years are changing the way we implement links:

  • JavaScript frameworks: Modern web apps often use client-side routing, where links are handled by JavaScript rather than a full page load. This requires using different a href values and the addition of attributes like data-*.

  • Progressive Web Apps (PWAs): PWAs blur the line between web pages and native apps. They often use app-style links that can display content in new windows without refreshing the page.

  • Mobile deep linking: Deep links allow you to link to specific locations within an iOS or Android app, or launch the app if not already installed. While not a web technology per se, deep linking uses URIs that can be placed in a href attributes.

  • Sponsored/UGC links: Google has introduced new link attributes to identify links that are advertisements or user-generated content. These include rel="sponsored" for paid links and rel="ugc" for comments and forum posts.

No matter what the future holds though, one thing is certain: as long as the web is composed of HTML documents, the humble <a href> will be a vital part of how we connect them. By crafting relevant, specific, accessible links, you can build a better user experience and make your site more navigable for humans and bots alike.

Similar Posts