The anchor element, marked by the <a> tag, plays a crucial role in HTML as it creates hyperlinks for users to move between different web pages, files, or sections within a page. This fundamental component of the web facilitates content connection and enhances navigation experience. The hypertext reference, commonly shortened to href, stands out as the key attribute of the anchor tag, specifying the URL or path destination.
What Is Hypertext and a Hyperlink?
Prior to exploring the anchor tag, it is advantageous to grasp the idea of hypertext, referring to text with hyperlinks displayed in a web browser. Hyperlinks, commonly known as links, allow users to navigate between various pages, documents, or sections within a single page.
href attribute of HTML anchor tag
The href attribute is utilized to specify the location of the file intended to be linked, essentially guiding the user to the target page.
Syntax
<a href = "..........."> Link Text </a>
The attribute "href" stores the destination address, while "Link Text" displays the clickable text that users see.
Linking to another HTML page
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>
<h1>Welcome to the Main Page</h1>
<p>
<a href="second.html">Click for Second Page</a>
</p>
</body>
</html>
Explanation
This creates a hyperlink that, upon clicking, will open the specified file (second.html) in the current tab as the default behavior.
Specify a location for the link using the target attribute
To navigate to a different page through a link, the target attribute of the HTML anchor tag can be utilized. By specifying this attribute, clicking on the link will redirect you to the designated page.
Example
<!DOCTYPE html>
<html>
<head>
<title>Link using target attribute</title>
</head>
<body>
<p>Click on <a href="https://logic-practice.com/" target="_blank"> this-link </a>to go on home page of our site.</p>
</body>
</html>
Note: The target attribute can only be used with the href attribute in the anchor tag. If we do not use the target attribute, then a link will open on the same page.
Using target attribute for opening in new tab
Utilize the attribute target="_blank" to launch a hyperlink in a separate tab or a fresh window.
Example
<a href="https://logic-practice.com/" target="_blank">Visit C# Tutorial</a>
Output:
Visit C# Tutorial (opens in new window)
Explanation
Using "target="_blank"" in the HTML code instructs the web browser to open the hyperlink in a new tab while keeping the original tab unaffected.
Customizing link colors with HTML body attributes
Example
<body bgcolor="red" text="yellow" link="blue" alink="#FFFF00" vlink="#FF00FF">
Explanation
This sets the background color of the red text to yellow, the unvisited links to blue, the active links to yellow, and the visited links to pink using hexadecimal color codes.
Anchor Tag with images
Anchor tags are not limited to text; they can also be utilized to generate links with images.
Example
<a href="https://logic-practice.com/">
<img src="https://placehold.co/400x300/3498db/ffffff?text=Logo" alt="main logo of our site" width="170" height="57">
</a>
Output:
The logo becomes clickable and redirects to the Example website.
Explanation
The image is wrapped within the <a> tag rather than text, and the image functions as a hyperlink.
Email and Telephone Links
Using anchor tags for email and phone links is a convenient way to allow users to easily contact you directly.
Example (Email links)
<a href="mailto:prachet@example.com">Send Email</a>
Output:
end email(opens the user's default email client with a new email to prachet@example.com).
Explanation
The mailto: scheme is used to initiate an email client and pre-fill the recipient's email address in the designated field.
Example (Phone links)
<a href="tel:+910000000">Call Us</a>
Output:
Call us(prompts a phone call on devices with calling capabilities).
Explanation
The tel: protocol is used to trigger phone calls on smartphones or applications, enabling users to initiate a dialing action.
Appearance of HTML anchor tag
- An unvisited link is displayed in blue and underlined.
- A visited link is displayed underlined and purple.
- An active link is underlined and red.
Internal page linking (Anchors)
Anchor tags within the same webpage can also serve as internal anchors, allowing users to navigate to different sections on the page.
Example
<a href="#section1">Go to Section 1</a>
...
<h2 id="section1">Welcome to Section 1</h2>
Output:
Clicking "Go to Section 1" scrolls down to the heading labelled "Welcome to Section 1."
Explanation
The format href="#id" is utilized to reference an element situated on the same page with an identical id.
Executing JavaScript with anchor tag
Using the javascript: protocol allows for the execution of JavaScript code via anchor tags.
Example
<a href="javascript:alert('Hello, user!');">Click Me</a>
Output:
Clicking the link displays a browser alert that says, "Hello, user!"
Explanation
The syntax href=" javascript:..." enables the incorporation of inline JavaScript within the anchor tag directly.
Additional anchor tag attributes
| Attribute | Description |
|---|---|
href |
Defines where in a link to go |
| target | States where the link has to be opened |
| download | Triggers download instead of navigating |
| hreflang | Declares the language of the referred document |
rel |
Describes the connection between related and source document |
| media | Mentions the device/media to which the resource is optimized |
type |
Defines the type of MIME of the linked content |
Downloadable File
Example
<a href="file.pdf" download>Download PDF</a>
Output:
Clicking the link starts downloading file.pdf.
Explanation
The presence of the download attribute triggers the browser to initiate a download of the file rather than displaying it directly.
Rel Attribute
Example
<a href="https://external-site.com" rel="noopener noreferrer" target="_blank">External Link</a>
Output:
Opens an external site in a new tab while ensuring security via rel.
Explanation
By utilizing the "rel="noopener noreferrer" attribute, security risks like reverse tabnabbing are mitigated, especially when the hyperlink is accessed in a new tab.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<a> |
Yes | Yes | Yes | Yes | Yes |
Conclusion
The HTML anchor element is a valuable tool for connecting web pages, downloading files through links, and linking to various resources like emails, phone numbers, or even JavaScript functions. By leveraging attributes like href, target, download, and rel, developers can customize link behavior to fulfill diverse needs, enhancing functionality and user interaction.
Mastering the anchor tag is essential for web developers, whether it involves plain text links, clickable images, or primary internal navigation.