HTML – A Href tag


What is a <a href> tag?

This is an anchor tag which defines a hyperlink that links one page to another page.

The “href” attribute is the most important attribute of the HTML <a> tag which links to destination page or URL.

Its also used to set the hyperlink to files, email addresses, locations in the same page or to any new webpage page.

Why <a href> tag is used ?

This is used in web pages for linking one page to another page.

This can be used to navigate to the location of a webpage, files location, send email addresses etc.

Search engines uses this <a>tag subject to determine the destination URL.

How <a href> tag works ?

Anchor tag actually opens the link from its actual location.

Actually it navigates from one webpage to other, takes the user from one page to another page.

It can open the new location from within the same web tab, and it can also open the new location in another web tab.

By default, links will appear as follows in all browsers:

1. An unvisited link is underlined and blue.

2. A visited link is underlined and purple.


3. An active link is underlined and red.

Online html learning !!!

Click to Learn More about – HTML Tutorial for beginners

1. <a href> tag opening in same window.

Example :

<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Anchor tag with no link <a href="">beautiful</a></p>
                <p>Visit Google <a href="https://www.google.com">google</a></p>
                <p>Visit Yahoo  <a href="https://www.yahoo.com">yahoo</a></p>
                <p>Visit Facebook <a href="https://www.facebook.com">facebook</a></p>
                <p>Visit Baidu <a href="https://www.baidu.com">baidu</a></p>
        </body>
</html>

Output :

2. <a href> tag opening in new window.


Example :

<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Anchor tag with no link <a href="" target="_blank">beautiful</a></p>
                <p>Visit Google <a href="https://www.google.com" target="_blank">google</a></p>
                <p>Visit Yahoo  <a href="https://www.yahoo.com" target="_blank">yahoo</a></p>
                <p>Visit Facebook <a href="https://www.facebook.com" target="_blank">facebook</a></p>
                <p>Visit Baidu <a href="https://www.baidu.com" target="_blank">baidu</a></p>
        </body>
</html>

Output :

3. <a href> tag with class.

Example :

<html>
        <head>
                <title>My Webpage</title>
                <style>
                .cls1{
                        color:red;
                }
                .cls2{
                        color:brown;
                }
                .cls3{
                        color:yellow;
                }
                .cls4{
                        color:orange;
                }
                .cls5{
                        color:blue;
                }
                </style>
        </head>
        <body>
                <p>Anchor tag with no link <a href="" class="cls1" target="_blank">beautiful</a></p>
                <p>Visit Google <a href="https://www.google.com" class="cls2" target="_blank">google</a></p>
                <p>Visit Yahoo  <a href="https://www.yahoo.com" class="cls3" target="_blank">yahoo</a></p>
                <p>Visit Facebook <a href="https://www.facebook.com" class="cls4" target="_blank">facebook</a></p>
                <p>Visit Baidu <a href="https://www.baidu.com" class="cls5" target="_blank">baidu</a></p>
        </body>
</html>

Output :

Learn html for beginners !!!

Click to Learn More about – HTML Tutorial for beginners

4. <a href> tag with id.

Example :

<html>
        <head>
                <title>My Webpage</title>
                <style>
                #id1{
                        color:red;
                }
                #id2{
                        color:brown;
                }
                #id3{
                        color:yellow;
                }
                #id4{
                        color:orange;
                }
                #id5{
                        color:blue;
                }
                </style>
        </head>
        <body>
                <p>Anchor tag with no link <a href="" id="id1" target="_blank">beautiful</a></p>
                <p>Visit Google <a href="https://www.google.com" id="id2" target="_blank">google</a></p>
                <p>Visit Yahoo  <a href="https://www.yahoo.com" id="id3" target="_blank">yahoo</a></p>
                <p>Visit Facebook <a href="https://www.facebook.com" id="id4" target="_blank">facebook</a></p>
                <p>Visit Baidu <a href="https://www.baidu.com" id="id5" target="_blank">baidu</a></p>
        </body>
</html>

Output :

Video Tutorial – Watch on Youtube