HTML <a> Tag
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.
- HTML <a> charset Attribute: This attribute is used to specifies the character-set. It is not supported by HTML 5.
- HTML <a> download Attribute: It is used to specify the target link to download when the user clicks.
- HTML <a> hreflang Attribute: It is used to specify the language of the linked document.
- HTML <a> media Attribute: It is used to specify the linked media.
- HTML <a> coords Attribute: It is used to specify the coordinate of links. It is not supported by HTML 5.
- HTML <a> name Attribute: It is used to specify the anchor name. It is not supported by HTML 5 you can use the global id attribute instead.
- HTML <a> rel Attribute: It is used to specify the relation between the current document and the linked document.
- HTML <a> shape Attribute: It is used to specify the shape of the link. It is not supported by HTML 5.
- HTML <a> type Attribute: It is used to specify the type of links.
- HTML <a> target Attribute: It specifies the target link.
- HTML <a> rev Attribute: It is used to specify the relation between the linked document and the current document. It is not supported by HTML 5.
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
.png)
