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
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | href | url | Specifies the destination link document. |
| 2 | name | internal_name | Specifies the name of an anchor it’s use in Internal Link. |
| 3 | rel | text | relationship between current document or linked document. |
| 4 | rev | text | relationship between linked document or current document. |
| 5 | target | _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,
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | id | unique_name | Declared unique id for an element. |
| 2 | class | class_name | Declared one or more classnames for an element. |
| 3 | style | styles | CSS inline styles specify an element. |
| 4 | title | title | Specify extra details of element contain, this will display as a “tooltip” for an elements. |
Event Attributes
<a> tag supports Event Attributes listed below,
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | onfocus | script | element gets focus on object when script tobe run. |
| 2 | onblur | script | element lose the focus on object when scrip tobe run. |
| 3 | onclick | script | clicked on object when script tobe run. |
| 4 | ondblclick | script | double click on object when script tobe run. |
| 5 | onkeydown | script | key is pressed when script tobe run. |
| 6 | onkeypress | script | key is pressed over element then released when script tobe run. |
| 7 | onkeyup | script | key is released over element when script tobe run. |
| 8 | onmousedown | script | mouse button was pressed over an element when script tobe run. |
| 9 | onmouseout | script | mouse pointer release over an element when script tobe run. |
| 10 | onmousemove | script | run mouse pointer moved when script tobe run. |
| 11 | onmouseover | script | run mouse pointer move over when script tobe run. |
| 12 | onmouseup | script | mouse button is released when script tobe run. |
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
Browser Compatibility
| Sno | Browser | Support |
| 1 | Chrome | Yes |
| 2 | Firefox | Yes |
| 3 | Edge | Yes |
| 4 | Opera | Yes |
| 5 | Safari | Yes |
| 6 | Internet Explorer | Yes |