How to use anchor tag to open links in HTML ?

Last Updated : 01 Jun, 2023

In this article, we will learn how to use anchor tags to open links in HTML and we will implement different operations using anchor tags in HTML. We will see in this article, how to redirect another website through an anchor tag and how to open a blank new tag for any new link to open an image in a new tag, and how to open the image on the same page these types of operations. We will learn how to implement using anchor tags in HTML.

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.

We will see some examples in this article for learning this Cross-reference in HTML.

Approach 1: Open any website on the same page: In this approach, we will create a meta tag in HTML and then we will create an anchor tag in anchor tag we will join the link of any website using href and then we can redirect on the same website by clicking on the anchor tag line.

Syntax:

<a href="https://www.geeksforgeeks.org/">
    Go to GeeksforGeeks
</a>

Example: In this example, we will open a website on the same page with the help of a link.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Anchor Tag</title>
</head>
 
<body>
    <a href="https://www.geeksforgeeks.org/">
        Go to GeeksForgeeks
    </a>
</body>
</html>

Output:

Website open on the same page

Approach 2: Open any website in a different tab: In this approach, we will create a first meta tag in HTML and then create an anchor tag in HTML and fill the website in a href tag to open the website on the new page. We will use the target blank by using the target blank we can open the website on a different page.

Syntax :

 <a href="https://www.geeksforgeeks.org/"  
    target="_blank"> 
     Go to GeeksforGeeks
 </a>

Example: Here with the help of target_blank we can open the website on a different page.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Anchor Tag</title>
</head>
 
<body>
    <a href="https://www.geeksforgeeks.org/"
        target="_blank">
        Go to GeeksForgeeks
    </a>
</body>
</html>

Output:

Website open in another tab

Approach 3: Open images by clicking: In this approach, we will fill the name of the image in the href tag to display the image on the screen.

Syntax:

<a href="download.jpg" >
    Show image
</a>

Example: here with the help of a link we can open our image in the same tag.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Anchor Tag</title>
</head>
 
<body>
    <a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20230128220855/download.jpg">
        Show image
    </a>
</body>
</html>