Mastering HTML Links: An In-Depth Look at the "a" Tag

The <a> (anchor) tag in HTML is used to create hyperlinks, which are essential for navigating between different web pages or sections within a web page. It can also be used to link to resources such as files, email addresses, or other URLs.

Syntax

<a href="URL">Link Text</a>

Following table summarizes the key attributes of anchor tag.

 

Attribute	Description
href	This attribute specifies the URL of the page or resource the link goes to. It is the most important attribute of the <a> tag. If href is not present, the <a> tag will not be a hyperlink.
target	This attribute specifies where to open the linked document. Common values include,   1.   _self (default): Opens the link in the same frame or window as the current page. 2.   _blank: Opens the link in a new tab or window. 3.   _parent: Opens the link in the parent frame. 4.   _top: Opens the link in the full body of the window, breaking out of any frames.
title	This attribute provides additional information about the link. When a user hovers over the link, the text in the title attribute will be displayed as a tooltip.
download	This attribute suggests that the browser should download the resource rather than navigate to it. It can specify a filename for the downloaded file.
rel	This attribute specifies the relationship between the current document and the linked document. Common values include nofollow, noopener, and noreferrer.   The nofollow value is used to instruct search engines not to follow the link. This means that the search engine crawlers will not pass any "link juice" or ranking power to the linked page. It is often used to prevent endorsement or to avoid linking to untrusted or user-generated content.   The noopener value is used to prevent the newly opened tab or window from having control over the original tab or window. This is a security feature to prevent malicious scripts on the linked page from using the window.opener object to access and potentially manipulate the original page.   The noreferrer value prevents the browser from sending the HTTP referrer header to the linked site. This means that the destination website will not know from which site the visitor has come. It also includes the functionality of noopener, enhancing security by preventing access to the window.opener object.
hreflang	Specifies the language of the linked document. It's useful for search engines to understand the language of the destination page.
type	Specifies the MIME type of the linked document.

 

Example 1: Basic Hyperlink

<a href="https://self-learning-java-tutorial.blogspot.com">Programming Languages Tutorial</a>

This is a standard hyperlink. When the user clicks on the text "Programming Languages Tutorial," it will navigate them to the URL https://self-learning-java-tutorial.blogspot.com in the same browser tab or window.

 

Example 2: Hyperlink that Opens in a New Tab

<a href="https://self-learning-java-tutorial.blogspot.com" target="_blank">Programming Languages Tutorial (Open in new tab)</a>

This link behaves like the previous one but includes the target="_blank" attribute. This attribute instructs the browser to open the link in a new tab or window, allowing the user to stay on the current page while also visiting the linked site.

 

Example 3: Link with Tooltip

<a href="https://self-learning-java-tutorial.blogspot.com" title="Click to visit tutorials website">Programming Languages Tutorial</a>

This link includes a title attribute. When a user hovers over the link text "Programming Languages Tutorial," a tooltip with the text "Click to visit tutorials website" will appear, providing additional information about the link.

 

Example 4: Downloadable Link

<a href="files/apache-licence.pdf" download="apache-licence.pdf">Download Apache Licence PDF</a>

This link is intended for downloading a file rather than navigating to it. The href attribute points to the file location files/apache-licence.pdf, and the download attribute suggests the file name to save as (apache-licence.pdf). When clicked, the browser will prompt the user to download the file rather than open it.

 

Example 5: Link to an Email Address

<a href="mailto:someone@example.com">Send Email</a>

This link uses the mailto: scheme, which will open the user's default email client with a new email message addressed to someone@example.com. Clicking this link allows users to easily send an email.

 

Example 6: Link to a Phone Number

<a href="tel:+1234567890">Call Us Now</a>

The tel: scheme is used for telephone links. When clicked on a device that supports calling (like a smartphone), it will initiate a phone call to the number +1234567890.

 

Example 7: Link to a Page within the Same Server

<a href="about-me.html">About Me</a>

This link points to a local page called about-me.html. It is a relative link, meaning it is assumed to be on the same server as the current page. When clicked, it navigates the user to the specified page within the same domain.

 

Each of these links uses the <a> (anchor) tag, with the href attribute specifying the destination. Depending on additional attributes like target, title, download, mailto:, or tel:, the behavior of the link changes, providing more functionality than just simple navigation.

 

hyper-link-demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hyperlink Demo</title>

    <style>
        div {
            margin: 10px;
        }

        /* Basic anchor link style */
        a {
            background-color: lightgray;
            color: #3498db; /* Default link color */
            text-decoration: none; /* Removes the underline */
            font-weight: 500; /* Makes the text slightly bold */
            transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition for hover effects */
        }

        /* Hover state: changes when the user hovers over the link */
        a:hover {
            color: #2c3e50; /* Darker shade on hover */
            text-decoration: underline; /* Adds underline on hover for emphasis */
        }

        /* Active state: changes when the link is being clicked */
        a:active {
            color: #2980b9; /* Slightly different color to indicate click */
        }

        /* Visited state: changes for links that have been visited */
        a:visited {
            color: #8e44ad; /* Different color for visited links */
        }

        /* Focus state: changes when the link is focused via keyboard or mouse click */
        a:focus {
            outline: 2px solid #2980b9; /* Adds a blue outline for accessibility */
            outline-offset: 2px; /* Moves the outline slightly away from the text */
        }

    </style>
</head>
<body>
    <!-- This link will navigate to https://self-learning-java-tutorial.blogspot.com when clicked. -->
    <div><a href="https://self-learning-java-tutorial.blogspot.com">Programming Languages Tutorial</a></div>

    <!-- This link will open the https://self-learning-java-tutorial.blogspot.com website in a new tab or window. -->
    <div><a href="https://self-learning-java-tutorial.blogspot.com" target="_blank">Programming Languages Tutorial (Open in new tab)</a></div>

    <!-- Link with tooltip -->
    <div><a href="https://self-learning-java-tutorial.blogspot.com" title="Click to visit tutorials website">Programming Languages Tutorial</a></div>

    <!-- This link will download the apache-licence.pdf file instead of navigating to it. -->
    <div><a href="files/apache-licence.pdf" download="apache-licence.pdf">Download Apache Licence PDF</a></div>

    <!-- Link to an email address -->
    <div><a href="mailto:someone@example.com">Send Email</a></div>

    <!-- Link to phone number -->
    <div><a href="tel:+1234567890">Call Us Now</a></div>

    <!-- Link to a page with in the same server -->
    <div><a href="about-me.html">About Me</a></div>

</body>
</html>

 

Previous                                                    Next                                                    Home