Last Updated on July 3, 2023 by Roshan Parihar
HTML <a> tag is used to place hyperlinks inside web pages. The HTML anchor tag is useful to link pages and move users from one page to another page.
1 |
<a href="https://tutorialdeep.com/">Open TutorialDeep website.</a> |
Output
The syntax of the <a>
tag in HTML 5 is given below:
The above syntax shows the <a>
tag with href
attribute which is mostly used attribute in anchor links.
Description of HTML anchor tag
It can be used to add hyperlinks in web pages. When users clicks the hyperlinks links, it moves them from one document to another.
By default, the anchor links will appear in every browsers as given below:-
- An unvisited link is underlined by default and blue in color.
- A visited link is underlined and purple in color.
- An active link is underlined and red in color.
However, you can change the default appearance of the anchor link using CSS.
Specifications of HTML <a>:
Start Tag | <a> |
---|---|
End Tag | </a> |
Content Type | URL, text |
Attributes of HTML anchor tag
HTML anchor Tag Specific Attributes
Attribute Name | Value | Description |
---|---|---|
download | filename | Add this attribute to allow users download the resource directly without visiting to it on link click. |
href | URL | Specify the location of the web page to visit on link click. |
hreflang | language-code | Add the attribute in addition with the href attribute to specify the language of the linked document. It cannot be used without the href attribute. |
media | media-query | Specify the device for which the linked document is optimized. |
ping | list-of-urls | Add space separated list of URLs. When the link is followed, the browser will send the post request with the body ping to the URL. Typically for tracking purpose. |
rel | alternate author bookmark external help license next nofollow noreferrer prefetch prev search tag |
Add space separated list of URLs. When the link is followed, the browser will send the post request with the body ping to the URL. Typically for tracking purpose. |
target | _blank _parent _self _top |
Add space separated list of URLs. When the link is followed, the browser will send the post request with the body ping to the URL. Typically for tracking purpose. |
type | media-type | Specify the media type of the linked document. |
Global Attributes
The <a>
tag supports the global attributes in HTML 5.
Events Attributes
The <a>
tag supports the event attributes in HTML 5.
Absolute and Relative URLs in HTML anchor tag
Absolute URL in Hyperlink
An absolute web address is an address inside href attribute of anchor tag given by full website url.
1 |
<a href="https://tutorialdeep.com/html-anchor-tag/">Absolute URL of this page</a> |
Output
Relative URL in Hyperlink
A relative web address is a address point to the same website.
1 |
<a href="html-anchor-tag/">Relative URL of this page</a> |
Output
Useful HTML <a> Tag Examples
Open Link in New Browser Tab
To open the links in new tab, use the target="_blank"
in the <a>
tag as given below.
1 |
<a href="https://tutorialdeep.com/" target="_blank" rel="noopener">Open TutorialDeep.com website</a> |
Output
It can be useful to open external links to outer website.
Link to Email Address to Send Emails
Add email address to hyerlink using attribute with value as href="mailto:[email protected]"
to send email on link click. Change the email address with your email address.
Output
When users click the link, it opens default mail client of operating system. Users can create a new email and send it to the mentioned email address within the href
attribute.
Resource Download on Link Click
If you want place download resource link for users, place the resource destination URL in the href
attribute and add attribute download
.
1 2 3 |
<a href="https://tutorialdeep.com/images/butterfly.jpg" download> <img src="https://tutorialdeep.com/images/butterfly.jpg" alt="Butterfly image" height="100px"> </a> |
Output
Link to Telephone Number
To link to telephone number, place the number inside the href
attribute as given below.
1 |
<a href="tel:1234567890">1234567890</a> |
Output
When the users click the link with number, it opens the number calling application on your operating system to make calls.
Mobile phones can mak automated calls when users clicks on the link to number. Desktop and Laptop can make call using applications like Skype.
Link to Section of the Same Page
To visit the section within a pages, place the id of the section inside the href
attribute as given below.
1 |
<a href="#section3">Go to Section 3</a> |
Supported Browsers
- Google Chrome
- Microsoft Edge
- Internet Explorer
- Safari
- Firefox
- Opera