Common Examples
1. Creating Basic Links:
To create a link to www.w3wiki.org, use the following code:
<a href="https://www.w3wiki.org">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.org" 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.org/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.org/"
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.org/">
<img src=
"https://media.w3wiki.org/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
HTML 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.
Contact Us