ANCHOR TAG IN HTML
A Complete Beginner guide to the Anchor Tag
Introduction:
The Anchor tag, also called the <a> tag is and HTML element that is used to create a hyperlink on the webpage. Hyperlink refers to linking of the current webpage to another webpage, websites, email addresses, files etc. The <a> tag performs the function of hyperlink with the help of its href attribute. The <a> tag is a Container tag and thus both opening and closing tags are mandatory.
Syntax:
<a href="URL"> Link Name </a>The tag has 3 appearances which describes its state:
- An Unvisited link appears as underlined and in blue color.
- A Visited link appear as underlined and purple in color.
- An Active link appears as underlined and red in color.
Basic Uses of the <a> tag:
- The following syntax is used to link other websites and webpages with the current webpage.
<a href="Website URL"> Website name </a>- The following syntax is used to send mails to the linked e-mail from user’s mail program whenever the user taps on the link
<a href="john.doe@xyz.com"> Mail </a>- This syntax is used to allow the user to call the linked phone no. directly from his no. as soon as he clicks on the link.
➢Cellular devices autodial the number.
➢Other OS use Skype etc. for dialing to the linked number.
<a href="tel:1478523690"> Phone </a>Attributes:
1. href:
- The href attribute is the most important attribute of the <a> tag. This attribute specifies the URL of the page, email address etc. The <a>tag will not be considered hyperlink unless it has the href attribute.
- The href attribute can take in any of the following data:
➢ URL to another website
➢ Relative URL to other pages of same website
➢ Link to some particular element inside the same website
➢ Other important protocols
➢ JavaScript file
Syntax:
<a href = “Link/URL”> Link Name </a>Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Href Attribute</title>
</head>
<body>
<a href = https://www.github.com > GitHub </a>
</body>
</html>2. download:
- The download attribute enables the user to download the linked item whenever the user clicks on the hyperlink.
- Once the user clicks on the link, the browser will automatically detect the appropriate file extension and download it.
- The value assigned to this attribute will overwrite the existing filename after downloading. Providing value to a download attribute is completely optional.
Syntax:
<a href = “File URL or Path/to/file” download> Download File </a>Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Download Attribute</title>
</head>
<body>
<a href="Path/to/File" download="New File Name">Download PDF</a></body>
</html>3. hreflang:
- The hreflang attribute takes care of the language of the linked document. This attribute can only be used if the href attribute is used.
- This attribute can hold a value i.e. language code, which contains the language of the linked document and can be specified by the global Lang attributes.
Syntax:
<a href = “ Link ” hreflang = language_code> Link Name </a>Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Hreflang Attribute</title>
</head>
<body>
<a href= "Path/to/File" hreflang="en-us" >File name</a>
</body>
</html>4. ping:
- The ping attribute is used to specify a particular no. of URLs that will be notified whenever the user clicks on the hyperlink.
- This attribute is usually used for monitoring or tracking an user’s activity on a particular hyperlink.
- This attribute takes in a value as an URL.
Syntax:
<a href = “ Link ” ping = “ URL ” > Link Name </a>NOTE: The URL in the ping should be a different URL than the href Link
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Ping Attribute</title>
</head>
<body>
<a href="https://www.xyz.com" ping="https://www.abc.com/pingCounter">Tap Here</a>
</body>
</html>Here on clicking on this href, you will directed to www.xyz.com but the ping counter on www.abc.com will also increase by 1 but you will not be directed to www.abc.com.
5. target:
- The target attribute specifies the browser about where to open the hyperlink.
- The target attribute mainly hold 5 values namely:
➢ _blank — This value opens the linked document in a new tab.
➢ _self — This is the default value and needn’t to be used explicitly. In this the document opens up on the same screen.
➢ _parent — This value opens up the linked document in the main frame i.e., it closes current tab and opens up the document freshly.
➢ _top — This value opens up the linked document in full window mode.
➢ framename — This value opens up the linked document in the referenced iframe.
Syntax:
<a href = “Link” target = “_blank / _self / _parent / _top /framename”>Link Name </a>Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="https://www.google.com" target="_blank"> Google </a> </body>
</html>6. referrerpolicy:
- The referrerpolicy attribute specifies about the referrer information that will be sent when the user clicks on the hyperlink .
- Referrer information refers to the data of the visitors of the website, mostly their location. This data can be further used by browsers for analytics, caching etc.
- The referrerpolicy mainly holds 7 values namely:
➢ no-referrer — No information is sent
➢ no-referrer-when-downgrade — Default and thus needn’t be used explicitly.
➢ origin — Sends the origin of the document
➢ origin-when-cross-origin
➢ same-origin — Sends referrer for same origin request
➢ strict-origin-when-cross-origin
➢ unsafe-url — Sends origin of document without considering security
Syntax:
<a href = “Link” referrerpolicy="no-referrer / no-referrer-whendowngrade / origin / origin-when-cross-origin / same-origin / strictorigin-when-cross-origin / unsafe-url"> Link Name </a>7. rel:
- The rel attribute determines the relationship between the current webpage and the linked document.
- This attribute would only function in the presence of the href attribute.
- The rel attribute mainly hold 3 values out of 13 values namely:
➢ stylesheet — Imports a stylesheet from specifies position
➢ nofollow — Links to an unendorsed or unrecommended document / link.
➢ noreferrer — Makes the referrer info unknown
Syntax:
<a href = “Link” rel = “value” > Link Name </a>Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="https://www.google.com" rel = "no-referrer">Google</a>
</body>
</html>Output:
Conclusion:
This document contains a brief information about the Anchor tag or <a> tag in HTML. We’ve learnt about all the attributes and properties that can be used with the <a> tag in order to add extensive functionality to our website.
<a> tag is very useful for making references in a website stacking up data from different websites at one place.
