HTML Tags – Anchor 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 webtab

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

HTML coding for a website !!!

Click to Learn More about – HTML Tutorial for beginners

Syntax :

<a href="http://www.example.com/">ExampleHost</a>.

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 :


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 :

<a> tag Attributes

SnoAttributesValueDescription
1hrefurlSpecifies the destination link document.
2nameinternal_nameSpecifies the name of an anchor it’s use in Internal Link.
3reltextrelationship between current document or linked document.
4revtextrelationship between linked document or current document.
5target_blank
_parent
_self
_top
Loads the linked document in new window.
Loads the linked document in the parent frame.
Loads the linked document in the same window.
Loads the linked document in the top up on same window.


Global Attributes

<a> tag supports Global attributes listed below,

SnoAttributesValueDescription
1idunique_nameDeclared unique id for an element.
2classclass_nameDeclared one or more classnames for an element.
3stylestylesCSS inline styles specify an element.
4titletitleSpecify extra details of element contain, this will display as a “tooltip” for an elements.


Event Attributes

<a> tag supports Event Attributes listed below,

SnoAttributesValueDescription
1onfocusscriptelement gets focus on object when script tobe run.
2onblurscriptelement lose the focus on object when scrip tobe run.
3onclickscriptclicked on object when script tobe run.
4ondblclickscriptdouble click on object when script tobe run.
5onkeydownscriptkey is pressed when script tobe run.
6onkeypressscriptkey is pressed over element then released when script tobe run.
7onkeyupscriptkey is released over element when script tobe run.
8onmousedownscriptmouse button was pressed over an element when script tobe run.
9onmouseoutscriptmouse pointer release over an element when script tobe run.
10onmousemovescriptrun mouse pointer moved when script tobe run.
11onmouseoverscriptrun mouse pointer move over when script tobe run.
12onmouseupscriptmouse button is released when script tobe run.

HTML coding for a website !!!

Click to Learn More about – HTML Tutorial for beginners

Browser Compatibility

SnoBrowserSupport
1ChromeYes
2FirefoxYes
3EdgeYes
4OperaYes
5SafariYes
6Internet ExplorerYes