HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <a> Tag


The <a> tag in HTML is used to create hyperlinks, which can link to another document or another part of the same document. The <a> stands for “anchor”.

Definition and Usage

The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

Syntax

The <a> tag is written as <a href="url">link text</a>. The href attribute specifies the destination of the link, and the link text is the visible part that users click on.

Here’s an example:

<a href="https://aptlearn.io">Visit aptLearn Website!</a>

In this example, the URL https://aptlearn.io is the destination of the link, and “Visit AptLearn!” is the link text.

Attributes

The <a> tag supports several attributes:

  • href: Specifies the URL of the page the link goes to.
  • target: Specifies where to open the linked document.
  • download: Specifies that the target will be downloaded when a user clicks on the hyperlink.
  • rel: Specifies the relationship between the current document and the linked document.

href Attribute

The most important attribute of the <a> tag is the href attribute, which indicates the link’s destination. The destination can be a full URL, a relative path, or even a location on the same page.

Here’s an example of a relative URL:

<a href="about.html">About Us</a>

In this case, clicking “About Us” would take the user to the “about.html” page in the same directory as the current page.

target Attribute

The target attribute specifies where to open the linked document. The _blank value is often used to open the link in a new tab or window:

<a href="https://www.aptlearn.io" target="_blank">Visit aptLearn</a>

Try it

Loading

In this case, clicking “Visit aptLearn” will open the aptLearn website in a new tab or window.

Download Attribute

The download attribute is used to instruct the browser to download the linked resource rather than navigating to it:

<a href="document.pdf" download>Download the document</a>

In this case, clicking “Download the document” will prompt the browser to download “document.pdf”.

mailto: and tel: URLS

The href attribute can also use mailto: and tel: URLs to create links that open the user’s email client or phone dialer, respectively:

<a href="mailto:support@aptlearn.io">Email Us</a>
<a href="tel:+1234567890">Call Us</a>

Try It

Loading

In the first case, clicking “Email Us” will open the user’s email client with a new message addressed to “support@aptlearn.io“. In the second case, clicking “Call Us” will dial “+1234567890” on the user’s phone or VoIP application.

The <a> Tag as a Placeholder

Sometimes, the <a> tag is used as a placeholder for a hyperlink, with the href attribute left blank:

<a href="#">This is a placeholder link</a>

In this case, the link doesn’t lead anywhere; clicking it will just keep the user on the current page. This can be useful during the development process or for elements that trigger JavaScript functionality.

In summary, the <a> tag is a powerful tool for creating navigation within and between web pages. By understanding and using its various attributes effectively, you can greatly enhance the user experience on your site.

Browser Support

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red
Attribute Chrome Edge Firefox Safari Opera
<a> Yes Yes Yes Yes Yes

It’s important to note that if the <a> tag does not have an href attribute, it merely serves as a placeholder for a hyperlink. Also, a linked page is typically displayed in the current browser window, unless you specify a different target.

The <a> tag supports a variety of attributes, including:

Attribute Value Description
download filename Initiates a download of the linked resource when the hyperlink is clicked
href URL Indicates the destination URL of the hyperlink
hreflang language_code Specifies the language of the content at the linked URL
media media_query Indicates the media or device for which the linked resource is designed
ping list_of_URLs Sends a list of URLs for tracking purposes when the hyperlink is followed
referrerpolicy no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, unsafe-url Defines the referrer policy for the hyperlink
rel alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, noopener, prev, search, tag Defines the relationship between the current document and the linked document
target _blank, _parent, _self, _top Defines where to open the linked document
type media_type Indicates the media type of the linked document

Tips and Notes

  • The <a> element is a block-level element.
  • The <a> element can be nested, but an <a> element cannot contain another <a> element.
  • The <a> element can contain data attributes.

Global Attributes with the <a> Tag

The <a> tag in HTML is compatible with a variety of global attributes. These are attributes that are universally supported by all HTML elements. Here are a few examples:

  • class: Specifies one or more class names for an element.
  • id: Specifies a unique id for an element.
  • style: Specifies inline CSS styles for an element.
  • title: Specifies extra information about an element, usually shown as a tooltip.

Here’s an example of using global attributes with the <a> tag:

<a href="https://www.aptlearn.io" id="aptlearn-link" class="external-link" style="color:blue;" title="Visit aptLearn">Visit aptLearn</a>

In this case, we’ve used the id, class, style, and title attributes to modify the behavior and appearance of our hyperlink.

Event Attributes with the <a> Tag

Event attributes in HTML are used to define the script to run when a specific event occurs, such as the user clicking on an element or the page loading. The <a> tag supports these attributes, allowing you to create interactive behavior.

For instance, you can use the onclick event attribute to run JavaScript when a link is clicked:

<a href="#" onclick="alert('You clicked the link!');">Click me</a>

 

Global Attributes with the <a> Tag

The <a> tag in HTML is compatible with a variety of global attributes. These are attributes that are universally supported by all HTML elements. Here are a few examples:

  • class: Specifies one or more class names for an element.
  • id: Specifies a unique id for an element.
  • style: Specifies inline CSS styles for an element.
  • title: Specifies extra information about an element, usually shown as a tooltip.

Here’s an example of using global attributes with the <a> tag:

<a href="https://www.aptlearn.io" id="aptlearn-link" class="external-link" style="color:blue;" title="Visit aptLearn">Visit aptLearn</a>

In this case, we’ve used the id, class, style, and title attributes to modify the behavior and appearance of our hyperlink.

Event Attributes with the <a> Tag

Event attributes in HTML are used to define the script to run when a specific event occurs, such as the user clicking on an element or the page loading. The <a> tag supports these attributes, allowing you to create interactive behavior.

For instance, you can use the onclick event attribute to run JavaScript when a link is clicked:

<a href="#" onclick="alert('You clicked the link!');">Click me</a>

In this example, clicking the link will trigger a JavaScript alert dialog with the message “You clicked the link!”.

Loading

There are many other event attributes in HTML, like onmouseover, onload, onfocus, and more. By using these event attributes with the <a> tag, you can create dynamic, interactive elements in your web pages.


Remember, while these examples demonstrate how to use global and event attributes directly within HTML, best practices recommend managing styles and interactivity separately using CSS and JavaScript files. This separation of concerns makes your code easier to manage and maintain.