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
powered by Advanced iFrame. Get the Pro version on CodeCanyon.
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
powered by Advanced iFrame. Get the Pro version on CodeCanyon.
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!”.
powered by Advanced iFrame. Get the Pro version on CodeCanyon.
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.
