HTML <a> Tag
The <a> tag defines a hyperlink, which is 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. This attribute determines where the user is directed upon clicking the link.
Syntax:
<a href = "link"> Link Name </a>
By default, links appear as follows in all browsers:
- Unvisited links: Underlined and blue.
- Visited links: Underlined and purple.
- Active links: Underlined and red.
Note: The <a> tag supports the Global Attributes in HTML and Event Attributes in HTML.
Attributes
The table below shows attributes and their respective descriptions.
Attributes | Description |
|---|---|
It specifies the character set. It is not supported by HTML 5. | |
It is used to specify the target link to download when the user clicks. | |
It is used to specify the language of the linked document. | |
It is used to specify the linked media. | |
It is used to specify the anchor name. It is not supported by HTML 5 you can use the global id attribute instead. | |
It is used to specify the relation between the current document and the linked document. | |
It is used to specify the shape of the link. It is not supported by HTML 5. | |
It is used to specify the type of links. | |
It specifies the target link. | |
It is used to specify the relation between the linked document and the current document. It is not supported by HTML 5. |
Common Examples
1. Creating Basic Links:
To create a link to www.w3wiki.net, use the following code:
<a href="https://www.w3wiki.net">Visit w3wiki</a>
2. Opening Links in New Tab:
To open a link in a new browser Tab, add the target=”_blank” attribute:
<a href="https://www.w3wiki.net" target="_blank">Visit w3wiki</a>
3. Linking to Email Addresses and Phone Numbers:
- To link to an email address:
<a href="mailto:example@xyz.com">Send email</a>
- To link to a phone number:
<a href="tel:+910000000">+910000000</a> // example number
4. Creating Internal Page Anchors
To link to another section on the same page:
<a href="#section1">Go to Section 1</a>
5. Executing JavaScript
To trigger JavaScript code:
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
Example 1: In this example, the w3wiki HTML Tutorial page will open when you click on the w3wiki HTML Tutorial link.
<!DOCTYPE html>
<html>
<body>
<h2>
Welcome to w3wiki
HTML Tutorial
</h2>
<a href="https://www.w3wiki.net/html-tutorials/">
w3wiki HTML Tutorial
</a>
</body>
</html>
Output:
HTML Tag Example Output
Example 2: In this example, we simply redirect from the w3wiki to the w3wiki page to open a link in a new window.
<!DOCTYPE html>
<html>
<body>
<h1>
Welcome to
<a href="https://www.w3wiki.net/"
target="_blank">
w3wiki
</a>
</h1>
<h2>This is anchor Tag</h2>
</body>
</html>
Output:
HTML Tag Example Output
Example 3: In this example, we will use an image to redirect to the w3wiki page.
<!DOCTYPE html>
<html>
<body>
<p>Click on the image to open web page.</p>
<!-- anchor tag starts here -->
<a href="https://www.w3wiki.net/">
<img src=
"https://media.w3wiki.net/wp-content/uploads/gfg1-11.png"
width="300" height="250" />
</a>
<!-- anchor tag ends here -->
</body>
</html>
Output:
HTML Tag Example Output
Example 4: In this example, we see how an anchor tag can be used to link different sections on the same web page using the href attribute and id selector.
<!DOCTYPE html>
<html>
<head>
<style>
a {
font-size: 20px;
font-weight: bold;
text-decoration: none;
padding: 10px 30px;
}
div {
width: 100%;
height: 300px;
background-color: #7EC8E3;
font-size: 25px;
color: white;
text-align: center;
margin: 8px 5px;
}
</style>
</head>
<body>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
<div id="section1">
Section 1
</div>
<div id="section2">
Section 2
</div>
<div id="section3">
Section 3
</div>
</body>
</html>
Output:
HTML
Browser Support
- Google Chrome: 1 and above
- Microsoft Edge: 12 and above
- Firefox: 1 and above
- Opera: 15 and above
- Safari: 1 and above
Contact Us