The <a> tag (anchor tag) in HTML is used to create a hyperlink on the webpage. This hyperlink is used to link the webpage to other web pages or some section of the same web page. It’s either used to provide an absolute reference or a relative reference as its “href” value.
Syntax:
<a href = "link"> Link Name </a>
Attribute: The anchor tag contains many attributes which are listed below.
Example 1: In this example, the GeeksforGeeks HTML Tutorial page will open when you click on the GeeksforGeeks HTML Tutorial link.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>
Welcome to GeeksforGeeks
HTML Tutorial
</h2>
<a href=
GeeksforGeeks HTML Tutorial
</a>
</body>
</html>
|
Output:
HTML <a> tag
Example 2: In this example, we simply redirect from the GeeksforGeeks to the Geeksforgeeks page.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>
Welcome to
<a href=
GeeksforGeeks
</a>
</h1>
<h2>This is anchor Tag</h2>
</body>
</html>
|
Output:
Redirecting the linked text to the site using <a> tag
Example 3: In this example, we will use an image to redirect to the Geeksforgeeks page.
HTML
<!DOCTYPE html>
<html>
<body>
<p>Click on the image to open web page.</p>
<img src=
width="300" height="250" />
</a>
</body>
</html>
|
Output:
Redirecting the linked image to website using HTML <a> tag
Example 4: In this example, we see how an anchor tag can be used to link different sections on the same web page using href attribute and id selector.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 4</title>
</head>
<body>
<div class="nav">
<p>GeeksforGeeks</p>
<ul>
<li><a href="#section1" class="btn">
Section 1
</a></li>
<li><a href="#section2" class="btn">S
ection 2
</a></li>
<li><a href="#section3" class="btn">
Section 3
</a></li>
<li><a href="#section4" class="btn">
Section 4
</a></li>
<li><a href="#section5" class="btn">
Section 5
</a></li>
<li><a href="#section6" class="btn">
Section 6
</a></li>
<li><a href="#section7" class="btn">
Section 7
</a></li>
<li><a href="#section8" class="btn">
Section 8
</a></li>
<li><a href="#section9" class="btn">
Section 9
</a></li>
<li><a href="#section10" class="btn">
Section 10
</a></li>
</ul>
</div>
<div class="sections" id="section1">
Section 1
</div>
<div class="sections" id="section2">
Section 2
</div>
<div class="sections" id="section3">
Section 3
</div>
<div class="sections" id="section4">
Section 4
</div>
<div class="sections" id="section5">
Section 5
</div>
<div class="sections" id="section6">
Section 6
</div>
<div class="sections" id="section7">
Section 7
</div>
<div class="sections" id="section8">
Section 8
</div>
<div class="sections" id="section9">
Section 9
</div>
<div class="sections" id="section10">
Section 10
</div>
</body>
</html>
|
CSS
* {
margin: 0px;
padding: 0px;
}
.nav {
height: 250px;
width: 250px;
text-align: center;
background-color: green;
color: whitesmoke;
font-size: 18px;
}
p {
font-size: 28px;
}
ul {
list-style: none;
}
a:hover {
color: whitesmoke;
}
.sections {
width: 12vw;
height: 15vh;
background-color: #7EC8E3;
font-size: 25px;
color: white;
text-align: center;
margin: 8px 5px;
}
.sections:nth-of-type(2n) {
background-color: #FB4570;
}
|
Output :
Redirecting to different section on the same page
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
- Microsoft Edge 12 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
07 Jun, 2023
Like Article
Save Article