HTML a tag
The <a> tag in HTML stands for "anchor". It’s used to create hyperlinks, which are the clickable links you see on web pages. When you click on a link, it can take you to another web page, a file, a specific section on the same page, or even trigger a download.
The <a> tag is like a bridge between one place and another, to let users click and go somewhere. By default, links will appear as below without override -
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
Syntax -
<a href=" ">Clickable Text</a>| Attribute | Description |
|---|---|
| charset | Specifies the character set (Char_encoding) of a linked document. Not supported in HTML5 |
| coords | Specifies the coordinates of a link. Not supported in HTML5 |
| download | Specifies the target should be downloaded instead of navigated to. HTML5 attribute |
| href | Specifies the target destination (URL) of a link. |
| hreflang | Specifies the language of the target link. This attribute can be used if href is used. HTML5 attribute |
| Media | Specifies media/device (media_query) the linked document is optimized. HTML5 attribute |
| Name | Specifies the name of the anchor. Not supported in HTML5 |
| rel | Specifies the relationship between the link’s page and the link’s target destination. alternate: Indicates an alternative version of the current web page. author: Indicates author of the page / article. bookmark: link to the current section of the page. help: Indicates the Help specific to the context. license: Indicates copyright license for the current document. next: Indicates the linked next page in the sequence. nofollow: Indicates the linked resource is not certified by the current document’s author. noreferrer: Indicates the browser not to send an HTTP referrer header. prefetch: Indicates the linked resource should be cached. prev: Indicates the linked previous page in the sequence. search: Indicates the search facility used to search the current, and related, documents. tag: A tagging term that applies to the link. |
| Shape | Specifies the shape of the link. Valid values: default, rect, circle or polyNot supported in HTML5 |
| target | Specifies in which the target destination should open. _self: Opens link in current window / tab. _blank: Opens link in a new window / tab. |
| type | Specifies type of the linked resource. |
By default, a linked page opens in the current browser window unless a different target is specified.
Example -
Scenario1 - Link to Another Website
<!DOCTYPE html>
<html>
<head>
<title>HTML link tag example</title>
</head>
<body>
<a href="https://www.tutorialscampus.com">
Go to TutorialsCampus Home</a>
</body>
</html>Output -
This link takes you directly to Wikipedia when clicked.
Scenario2 - Link to a Page in the Same Website
<a href="contact.htm">Contact Us</a>This assumes you have a page named contact.htm in the same folder.
Scenario3 - Open Link in a New Tab
<a href="https://www.youtube.com" target="_blank">Visit YouTube</a>This is useful when you want users to open a link without leaving your site.
Scenario4 - Link to an Email Address
<a href="mailto:someone@example.com">Send us an Email</a>Clicking this will open the user’s email client to send an email.
Scenario5 - Link to Download a File
<a href="files/report.pdf" download>Download Report</a>The browser will download the file instead of opening it.
Scenario6 - Link to a Section on the Same Page
First, create a target section with an id:
<h2 id="faq">Frequently Asked Questions</h2>Then, create a link to that section:
<a href="#faq">Jump to FAQ Section</a>This helps with in-page navigation, especially on long pages.