HTML Anchor Tag - The Ultimate Reference Guide

What is an Anchor element?

An <a> Tag, along with its <href> attribute, is a HTML element that creates a hyperlink. The hyperlink can be to another web page, email address, location on the same page, or files.

The “a” element is typically used with the “href” attribute, which specifies the URL or web address that the link should point to.

Usage and Examples

The Anchor Tag can be used as a:

• Link to an absolute URL: The Anchor Tag can be used to create a link to an external website which directs the user to the specified website when clicked.

  <a href="https://www.thewebmaster.com" >Visit The Webmaster</a>

• Link to a relative URL

  <a href="/contact/" >Origin-relative URL</a>
  <a href="//thewebmaster.com/" >Scheme-relative URL</a>
  <a href="./contact/" >Directory-relative URL</a>

• Link to an element on the same page

  <a href="#attributes">Jump to Attributes</a>

• Link to an email address

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

• Link to a telephone number

  <a href="tel:01234567890" >Telephone us on 01234567890</a>

• Link to a Skype number

  <a href="callto:01234567890" >Telephone us on 01234567890</a>

You can view further usage examples in the Attributes section below.

Attributes

The Anchor tag supports the Global Attributes, Event Attributes, and the following:

• download

  The download attribute specifies that the target will be downloaded rather than followed. You can add an optional value specifying the name of the downloaded file.

  <a href="https://www.thewebmaster.com/example.pdf" download="filename.pdf">Download pdf file.</a>

• href

  The href attribute specifies the URL of the page that the link goes to.

  <a href="https://www.thewebmaster.com" >Visit The Webmaster</a>

• hreflang

  The hreflang attribute specifies the language of the linked document. It does not affect and is purely advisory.

  <a href="https://www.thewebmaster.com" hreflang="en-GB">Visit The Webmaster</a>

• media

  The media attribute specifies the media or device the target link is optimized for, such as mobile devices or print.

  The value must be a media type or media query. Multiple media types or queries can be combined with logic (and, or, not)
  

  <a href="https://www.thewebmaster.com/" target="_blank" media="screen and (device-width: 1440px)">The Webmaster</a>

• ping

  The ping attribute can take a string of URLs, with a single space as the separator. When the link is clicked, a POST request will be sent to the URLs with the body ping. This can be used for tracking.

  <a href="https://www.thewebmaster.com/signup/" ping="https://bit.ly/tracking">Sign up here</a>

• referrerpolicy

  The referrerpolicy attribute specifies the referrer information that you wish to send with the link.

  Values can include:

  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • no-referrer-when-downgrade
  • strict-origin-when-cross-origin (default)
  • unsafe-url

  <a href="https://www.thewebmaster.com/" referrerpolicy="no-referrer">The Webmaster</a>

• rel

  The rel attribute specifies the relationship between the two documents.

  Values can include:

  • alternate
  • author
  • bookmark
  • external
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • noopener
  • prev
  • search
  • tag
  • sponsored
  • ugc

  <a href="https://www.externaldomain.com/" rel="noopener">Outgoing Link</a>

• target

  The target attribute specifies how to open the linked document.

  Values can include:

  • _blank
  • _parent
  • _self
  • _top

  <a href="https://www.externaldomain.com/" target="_blank">Outgoing Link</a>

• type

  The type attribute hints at the MIME type of the destination document. It has no effect and is purely advisory.

  <a href="https://www.thewebmaster.com/" type="text/html">The Webmaster</a>

Best Practices

Security

• Use rel=“noopener” for external links. This prevents other websites from obtaining access to your page via the browser session.

  <a href="https://www.externaldomain.com/" target="_blank" rel="noopener">Outgoing Link</a>

SEO

• Use rel=“UGC” for User Generated Links. These would include, for example, forum posts and blog comments. It is acceptable to use the rel="nofollow" attribute too.

  <a href="https://www.thewebmaster.com/" rel="ugc">Forum spam link</a>

• Use rel=“sponsored” for Sponsored Links. These would include adverts, affilliate links, advertorial links, and other paid links.

  <a href="https://www.thewebmaster.com/" rel="sponsored">Advert text</a>

• Anchor Text. The text between the Anchor Tags is called the anchor text. It is the text that is displayed when linking to another document. Google uses the anchor text to help determine the subject-matter of the destination page. You should ensure the anchor text is:

  • Relevant to the linked page.
  • Not spammy (i.e., not keyword heavy).
  • Not generic, such as “read more” or “visit site.”
  • To the point.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile