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.
Tóm Tắt
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Welcome to GeeksforGeeks HTML Tutorial</h2>
<a href="https://www.geeksforgeeks.org/html-tutorials/">
GeeksforGeeks HTML Tutorial
</a>
</body>
</html>
Output:
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="https://www.geeksforgeeks.org/">
GeeksforGeeks
</a>
</h1>
<h2>This is anchor Tag</h2>
</body>
</html>
Output:
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>
<a href="https://www.geeksforgeeks.org/">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg1-11.png"
width="300" height="250" />
</a>
</body>
</html>
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 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">Section 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 :
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
- Microsoft Edge 12 and above
My Personal Notes
arrow_drop_up
