Skip to content
Related Articles

Related Articles

HTML <a> Tag

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 24 Aug, 2022
View Discussion
Improve Article
Save Article

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>
     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
      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>
 
 
  <!-- anchor tag starts here -->
    <img src=
    width="300" height="250" />
  </a>
  <!-- anchor tag ends here -->
</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">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




/* Write CSS Here */
 
 * {
     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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!