HTML <a> Tag Tutorial - Usage, Syntax,
Attributes and Example

INTRODUCTION

The HTML <a> element stands for anchor element and is used to create hyperlinks or links. Links can be created to a webpage, files, section in same page, mail or to anything which URL can address.

Syntax :

<a href="URL"> LINK_NAME </a>

Example:

<a href="www.google.com"> GOOGLE </a>

Output:

ATTRIBUTES

1. href

It is the URL that anchor element refers to. href serves various purposes. We will explore common use cases.

a. Link to webpage

<a> tag can create link to webpage (either in your site or external site). The href value is set to URL of web page.
Example :

<a href="https://google.com"> GOOGLE </a>

b. Link to section of webpage:

href can be used to create link to a section of webpage. It is necessary to define id attribute to that section of webpage. The href value is set equal to id to create link.

<a href="#nabvar"> TOP </a>

c. Link to email client:

href can be used to create link to a particular email address. When user clicks on the link, it will open the default email client of your computer (eg. outlook) with the email address you specify in href, mentioned as destination address. You have to use mailto protocol as href value followed by email address.

<a href="mailto: yourmailid@sample.com"> send mail </a>

d. Link to Telephone App

href can be used to create link to telephone. When user clicks on link the default dialer app on your phone (when webpage opened on mobile platform) will open with the phone number you had mentioned in href. When opened on computer there will be a pop up asking you to choose the application to open tel link..

<a  href="tel:+123456"> +123456 </a>

2. download

The download attribute of anchor element is used to make a link function as download link. When a link is clicked the file download popup is opened to save the file. The download attribute will only work for same origin URLs (you cannot provide link of file which is hosted on other websites)

<a href="" download="MyFile.pdf">download pdf</a>

3. Target

Target attribute specifies where to display the URL when a link is clicked. You have the option of opening the link in a new tab/window when user clicks on a link or in the same tab/window/iframe so the current browsing session is continued. It is important to understand browsing context to understand the values of this option.

A browsing context refers to the environment in which a browser renders a document. In modern browsers, this is typically a tab, but it can also be a window, a popup, a web application, or even a section of a page, such as a frame or an iframe.

Iframes can be nested within other iframe which is known as nested browsing context. In the below example we have nested iframes. Iframe-2 is parent of iframe-1 and Tab is top level browser Tab.

browsing-context

a. _self : It is the default value. It opens the URL in current window/tab or iframe. If a link in iframe-1 is set to _self then the destination link is opened in itself i.e. iframe-1. The same is true for iframe-2 and tab.

b. _blank : It opens the URL in new window/tab. Hence whether the link is in iframe-1, iframe-2 or tab, the destination link is always opened in new Tab/window.

c. _parent : It opens the URL in parent window. If a link in iframe-1 is set to _parent then the destination link is opened in iframe-2. Also, if a link in iframe-2 which is set to _parent then the destination link is opened in tab.

d. _top : It opens the URL in top window and comes out of any nesting browsing-context. If a link in iframe-1 is set to _top then the destination link is opened in tab. The same is true for iframe-2(opens in tab).

4. hreflang

The hreflang attribute is used to specify the language of webpage in the link.

<a 
                href="www.example.com/de" hreflang="de">german link</a>

5. ping

The ping attribute defines a space-separated list of URLs that will receive a notification when the user clicks the hyperlink. When the link is clicked, the browser sends a brief HTTP POST request to the specified URLs. This attribute is commonly used for tracking and monitoring purposes.

<a href="www.sample.com" ping="https://sample-tracking.com https://sample-analytics.com">sample link</a>

6. referrer

The referrer attribute is used to define the HTTP header referrer for the outgoing links from the current webpage.

The HTTP Referrer header contains the address of the previous page from which a request was made. It makes possible to identify the referring website. This header is commonly used for analytics, logging, access control and security purposes.

In the below example a user is on website-A and clicks on a link that points to website-B. The user's browser makes an HTTP request to the server of website-B. In this case the referrer is website-A. In the HTTP request referrer header contains address of website-A.

http-referrer-header

The values for the content attribute referrer header can take are listed below.

• no-referrer: Do not send HTTP referrer header.
• origin: send the origin of the webpage.
• no-referrer-when-downgrade: When the destination webpage is atleast as secure as the current page(HTTP(S) -- HTTPS ) send the full URL as referrer, and if its less secure(HTTPS -- HTTP ) send no referrer. This the default option.
• origin-when-cross-origin: when request comes from same-origin send full url and for other cases send only origin.
• same-origin: when request comes from same-origin send full url and for Cross-origin no referrer header will be sent.
• strict-origin: When the destination webpage is atleast as secure as the current page(HTTP(S) -- HTTPS ) send the origin as referrer, and if its less secure (HTTPS -- HTTP ) send no referrer.
• strict-origin-when-cross-origin: when request comes from same-origin send full url. When the destination webpage is atleast as secure as the current page(HTTP(S) -- HTTPS ) send the origin as referrer. Otherwise send no referrer.
• unsafe-URL: whether request comes from same-origin or cross-origin send full url. This case is unsafe because it can leak origins and paths to insecure origins.

7. rel

The rel (relationship) attribute in the <a> tag specifies the relationship between the current document and the linked document. It is useful for SEO, security, and defining the purpose of the hyperlink. The values this attribute can take is described in detail below.

a. alternate

The rel="alternate" attribute in an <a> tag indicates an alternative version of the current page. It is commonly used for multilingual pages or mobile versions.

b. author

The rel="author" attribute in an <a> tag is used to specify the author of a webpage. It is used to link the content to the author's profile, often on social-media platforms.

c. bookmark

The rel="bookmark" attribute in an <a> tag is used to indicate that the linked URL represents a permanent link (permalink) to a specific section or article within a website.

d. canonical

The rel="canonical" attribute in an <a> tag is used to specify the preferred version of a page when multiple URLs have the same content.

e. dns-prefetch

The rel="dns-prefetch" attribute in an <a> tag is used to resolve domain names in advance, reducing latency when loading external resources. This helps improve page load speed by performing DNS lookups before the resource is actually needed.

f. external

The rel="external" attribute in an <a> tag is used to indicates that the linked page is an external website (outside the current domain)

g. help

The rel="help" attribute in an <a> tag is used specify that the linked URL provides help documentation or guidance related to the current page. It is primarily used to define a link as a help resource.

h. icon

The rel="icon" attribute in an <a> tag is used to specify the favicon (small icon displayed in the browser tab) for a webpage.

i. license

The rel="license" attribute in an <a> tag is used specify that the linked URL points to a license document that applies to the content on the current page. This is useful for specifying copyright or open-source licensing details.

j. icon

The rel="icon" attribute in an <a> tag is used to specify the favicon (small icon displayed in the browser tab) for a webpage.

k. license

The rel="license" attribute in an <a> tag is used to specify that the linked URL points to a license document that applies to the content on the current page. This is useful for specifying copyright or open-source licensing details.

l. manifest

The rel="manifest" attribute in an <a> tag is used to specify a Web App Manifest. A web application manifest is a JSON text file that provides information about a web application.

m. modulepreload

The rel="modulepreload" attribute in an <a> tag is used to preload JavaScript modules efficiently. This helps improve performance by loading ES modules before they are needed, reducing delays in execution.

j. next and prev

The rel="next/prev" attribute in an <a> tag is used to specify Indicates previous and next pages in a series (useful for paginated content).

k. nofollow

The rel="nofollow" attribute in an <a> tag is used to specify search engines not to pass link authority (PageRank) to the linked page. It helps prevent spammy or paid link influence.

k. noopener

The rel="noopener" attribute in an <a> tag is used to Prevent the new page from accessing the window.opener property of the original page, which helps prevent malicious scripts from taking control.

k. noreferrer

The rel="noreferrer" attribute in an <a> tag is used to prevent the browser from sending the Referrer header to the linked page.

k. pingback

The rel="pingback" attribute in an <a> tag is used to specify a pingback URL, allowing automated notifications when other websites link to your content. It was primarily used in blogs and CMS platforms (like WordPress) to track backlinks.

k. preconnect

The rel="preconnect" attribute in an <a> tag is used to establish early connections to external resources, improving page load performance by reducing latency. It is useful when loading resources from third-party domains

k. prefetch

The rel="prefetch" attribute in an <a> tag is is used to load resources in advance that the user is likely to need in the near future. It helps improve performance by preloading assets that will be used on subsequent pages.

k. preload

The rel="preload" attribute in an <a> tag is used to load resources in advance that the user is likely to need in the near future. It helps improve performance by preloading assets that will be used on subsequent pages.

Frequently Asked Questions (FAQ)

<href="https://example.com" id="myLink>Disabled Link</a>

<script>
  document.getElementById("myLink").addEventListener("click", function(event) {
    event.preventDefault();
    alert("This link is disabled!");
  });
</script>

const hrefValue = document.getElementById("myLink").href;
console.log(hrefValue); 

<button onclick="window.location.href='https://example.com';">
Go to Example
</button> 

<href="https://example.com" class="btn">Click Me</a>
    
<style>
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: blue;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}
.btn:hover {
  background-color: darkblue;
}
</style>

html {
    scroll-behavior: smooth;
  }