Open In App
Related Articles

HTML Links

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

HTML Links are connections from one web resource to another. A link has two ends, An anchor and a direction. The link starts at the “source” anchor and points to the “destination” anchor, which may be any Web resource such as an image, a video clip, a sound bite, a program, an HTML document or an element within an HTML document.

You will find many websites or social media platforms ( Like YouTube, and Instagram ) which link an image to a URL or a text to a URL etc. This means that by using the ‘a’ tag, you can link 1 element of the code to another element that may/may not be in your code. 

Note: A hyperlink can be represented by an image or any other HTML element, not just text.

Syntax:

href : The href attribute is used to specify the destination address 
           of the link used. "href" stands for Hypertext reference. 
Text link : The text link is the visible part of the link. 
                  It is what the viewer clicks on. 

An external link is a type of hyperlink that directs users to a resource, such as a webpage, image, or document, located on a different website or domain.

Example: The implementation of external links

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Internal Link Example</title>
</head>
 
<body>
    <p>Click on the following link</p>
    <a href="https://www.geeksforgeeks.org">GeeksforGeeks</a>
</body>
 
</html>

                    

Output : 

rft

An internal link is a type of hyperlink whose target or destination is a resource, such as an image or document, on the same website or domain. 

Example: The implementation of Internal Links

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Internal Link Example</title>
</head>
<body>
    <!--internal link-->
    <p>
        <a href="./index2.html">
            GeeksforGeeks Contribute
        </a> <br>
        It is a link to the contribute
        page on GeeksforGeeks' website.
    </p>
</body>
 
</html>

                    

Output : 

fde

Different types of links appear in different formats such as:  

  • An unvisited link appears underlined and blue in colour by default.
  • A visited link appears underlined and purple in colour by default.
  • An active link appears underlined and red in colour by default.

Example: The change of appearance of links using CSS

html

<!DOCTYPE html>
<html>
 
<head>
    <style>
        a:link {
            color: red;
            background-color: transparent;
        }
 
        a:visited {
            color: green;
            background-color: transparent;
        }
 
        a:hover {
            color: blue;
            background-color: transparent;
        }
 
        a:active {
            color: yellow;
            background-color: transparent;
        }
    </style>
</head>
 
<body>
    <p>Changing the default colors of links</p>
    <p>Visited Link</p>
        GeeksforGeeks
    </a>
    <p>Link</p>
    <a href="https://facebook.com">
        facebook
    </a>
    <p>hovering effect</p>
        GeeksforGeeks
    </a>
</body>
 
</html>

                    

Output: 

The target attribute is used to specify the location where the linked document is opened. The various options that can be used in the target attribute are listed below in the table:

Example: The implementation of target attribute

html

<!DOCTYPE html>
<html>
   
<head>
    <title>Target Attribute Example</title>
</head>
 
<body>
    <h3>Various options available in the Target Attribute</h3>
 
    <p>If you set the target attribute to "_blank",
        the link will open in a new browser window or tab.
    </p>
    <a href=
       target="_blank">
        GeeksforGeeks
    </a>
 
    <p>If you set the target attribute to "_self",
        the link will open in the same window or tab.
    </p>
    <a href=
       target="_self">
        GeeksforGeeks
    </a>
 
    <p>If you set the target attribute to "_top",
        the link will open in the full body of the window.
    </p>
    <a href=
       target="_top">
        GeeksforGeeks
    </a>
 
    <p>If you set the target attribute to "_parent",
        the link will open in the parent frame.
    </p>
    <a href=
       target="_parent">
        GeeksforGeeks
    </a>
</body>
 
</html>

                    

Output: 

linksOP2

An image can be used to create a link to a specified URL. When the viewer clicks on the link, it redirects them to another page.  The code is as:

 <a href="url">
<img src="file address (on device or on web)" alt="_" style="width:__ ; height:__ ; border:__">
 </a> 

Note: img src stands for image source ( i.e URL or file address ) 

Example: In this example, we will see the implementation of target attribute with an example.

html

<!DOCTYPE html>
<html>
 
<body>
    <h3>Using Image as a link</h3>
    <p>Click on the image to visit GeeksforGeeks homepage.</p>
             alt="GeeksforGeeks"
             style="width:80px;height:80px;border:0">
    </a>
</body>
 
</html>

                    

Output: 

linksOP3

A bookmark is a link that can be used to jump to specified portion of a webpage.This is very useful if a webpage is quite long.

Steps to create a bookmark are: 

  • Using the id attribute, create a bookmark. 

  • Add the specified portion of the webpage to the bookmark. 

Example: In this example, we will see the implementation of target attribute with an example.

html

<!DOCTYPE html>
<html>
 
<body>
 
    <p><a href="#T11">Jump to Topic 11</a></p>
    <p><a href="#T17">Jump to Topic 17</a></p>
    <p><a href="#T20">Jump to Topic 20</a></p>
 
    <h2>Topic 1</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 2</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 3</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 4</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 5</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 6</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 7</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 8</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 9</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 10</h2>
    <p>paragraph 1
        .....</p>
 
    <h2 id="T11">Topic 11</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 12</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 13</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 14</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 15</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 16</h2>
    <p>paragraph 1
        .....</p>
 
    <h2 id="T17">Topic 17</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 18</h2>
    <p>paragraph 1
        .....</p>
 
    <h2>Topic 19</h2>
    <p>paragraph 1
        .....</p>
 
    <h2 id="T20">Topic 20</h2>
    <p>paragraph 1
        .....</p>
</body>
 
</html>

                    

Output: 

linksOP4

A text link of a pdf, doc or zip file can be created to make it downloadable.

Example: In this example, we will see the implementation of target attribute with an example.

html

<!DOCTYPE html>
<html>
 
<h3>Creating a download link</h3>
 
<body>
    <a href="GeeksforGeeks.pdf">
        Download PDF File
    </a>
</body>
 
</html>

                    

Output: : 

linksOP5

Supported Browser:

  • Google Chrome 1 and above
  • Microsoft Edge 12 and above
  • Firefox 1 and above
  • Opera 2 and above
  • Safari 1 and above


Last Updated : 11 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads