HTML - <a> Tag

HTML <a> tag defines a hyperlink. It’s used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

The anchor tag(<a>) with its href attribute creates a hyperlink to web pages, where the href attribute indicates the link’s destination. After clicking on the link by default, it will appear as follows in all browsers. If the href attribute is present in an anchor tag, pressing the Enter key while the focus on the <a> tag will activate it.

Syntax

<a href="...">Content...</a>

Attribute

HTML a tag supports Global and Event attributes of HTML. Accept some specific attributes as well which are listed bellow.

Attribute	Value	Description
download	filename	Allow user to download the linked file when user clicked on the hyperlink.
href	URL	Specify the link page where we wants to send the user.
hreflang	language_code	Spefeicy the language of the attached link.
media	media_query	Specifies what media/device the linked document is optimized for.
ping	list_of_URLs	Specifies a space-separated list of URLs.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	Specifies which referrer information to send with the link.
rel	alternate author bookmark external help license next nofollow noreferrer noopener prev search tag	Define the relation between the current and linked url document.
target	_blank _parent _self _top	Specify how or where to open the linked document.
type	media_type	Specify the media type of the inked url document.

Examples of HTML a Tag

Bellow examples will illustrate the usage of a tag. Where, when and how to use anchor tag and how to hyperlinks we can style that anchore elements using CSS.

Creating hyperlink using a Tag

In the following example, we are creating a hyperlink using the <a> tag with its href attribute, which will send the user to our homepage.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML a Tag</title>
</head>

<body>
    <!-- Creating Hyperlink Text-->
    <p>Visit our
        <a href="https://www.tutorialspoint.com/index.htm">
            Home Page
        </a>
    </p>
</body>

</html>

Blank destination with a Tag

In the following example we are keeping the href="" value null. Since we didn't provide the link destination to the href attribute, nothing will happen if the user clicks on the link.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML a Tag</title>
</head>

<body>
    <!-- Creating Hyperlink Text-->
    <!-- This will not redirect to anywhere 
            but will open HTML ide
    -->
    <p>Visit our
        <a href="">
            Home Page
        </a>
    </p>
</body>

</html>

Opening Links in New Tab

The following is another example of an HTML anchor tag (<a>). Here, we are creating a hyperlink using the <a> tag with its href attribute, and we are giving the link destination to the href attribute as the landing page of Tutorialspoint website, which is: "https://www.tutorialspoint.com/ is. index.htm".

We are giving the target attribute value as target = ‘_blank’, when the user clicks on the link the link destination will be open in new window.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML a Tag</title>
</head>

<body>
   <!-- Opening Links in New Tab -->
   <a href=https://www.tutorialspoint.com/index.htm 
      target="_blank" 
      name=‘tutorialspoint’>
       TutorialsPoint
   </a>
</body>

</html>

Linking to Email Addresses and Phone Numbers

Here in this example we will create two hyperlink, if we cilced on those links one will open the default mailing app to send the mail on mentioned mail id in href attribute. And the other one will open the call functionality to call the mentioned number in href.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML a Tag</title>
</head>

<body>
    <!-- Linking to Email Addresses and Phone Numbers  -->
    <p>You can contact with us</p>
    <ul>
        <li><a href="tel:+910000000" name=Call>
       Call Us
   </a></li>

        <li><a href="mailto:example@xyz.com" name=Mail>
       Mail Us
   </a></li>
    </ul>
</body>

</html>

Creating Internal Page Anchors

In the following example we are creating on page navigation linking.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML a Tag</title>
    <style>
    div{
        margin-top: 1500px;
        border: 1px solid black;
    }
    </style>
</head>

<body>
    <a href="#section1">Go to Section 1</a>
    <br>
    <a href="#section2">Go to Section 2</a>
    <!-- Creating Internal Page Anchors  -->
    <div>
        <h3 id="section1">Section 1</h3>
    </div>
    <div>
        <h3 id="section2">Section 2</h3>
    </div>
    
</body>

</html>

Downloading attached linked file

Using the download attribute with the anchor <a> tag, we can download our local images from the browser just click on the links or particular images.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML a Tag</title>
</head>

<body>
    <div>
        <!-- Downloading attached Linked file-->
        <p>
            Click the 
            <a href=
"https://www.tutorialspoint.com/images/logo.png"
               name=‘image’ download>
                 Download
            </a> 
            Button
        </p>

    </div>
</body>

</html>

Supported Browsers

Tag
a	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page