HTML | Links

What is a link?

It is a connection from one web resource to another.A link has two ends,An anchor and 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.

HTML Link Syntax



Links are specified in HTML using the “a” tag.

Syntax Explanation:

href : The href attribute is used to specify 
the destination address of the link used.
Text link : The text link 
is the visible part of the link.

Input :

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
 <h3>Example Of Adding a link</h3>
   <body>
      <p>Click on the following link</p>
      <a href = "https://www.geeksforgeeks.org">GeeksforGeeks</a>
   </body>
      
</html>

chevron_right


Output :

Internal Links

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.
Input:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<h3>Internal Link And External Link Example</h3>
<body>
<p><a href="html_contribute.asp/">GeeksforGeeks Contribute
</a> It is a link to the contribute page on GeeksforGeeks' website.</p>
  
<p><a href="https://www.geeksforgeeks.org">GeeksforGeeks
</a> It is a link to the GeeksforGeeks website on the World Wide Web.</p>
  
</body>
</html>

chevron_right


Output :

Changing Link Colours in HTML

Different types of links appear in different formats such as:

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

The appearances of links can be changed by using CSS.
Input :

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
<a href="https://www.geeksforgeeks.org">GeeksforGeeks</a
  
<p>Link</p>
  
<a href="https://facebook.com">facebook</a>
  
<p>hovering effect</p>
  
<a href="https://www.geeksforgeeks.org">GeeksforGeeks</a>
  
</body>
</html>

chevron_right


Output:


The Target Attribute in Links

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:

Input:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<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="https://www.geeksforgeeks.org" 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="https://www.geeksforgeeks.org" 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="https://www.geeksforgeeks.org" target="_blank">GeeksforGeeks</a
  
<p>If you set the target attribute to "_parent", 
the link will open in the parent frame.</p>
<a href="https://www.geeksforgeeks.org" target="_blank">GeeksforGeeks</a
  
</body>
</html>

chevron_right


Output:

Using Image as a Link in HTML

An image can be used to create a link to a specified url.

Input:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Creating a Bookmark Link for a Webpage


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

Steps to create a bookmark are:
1. Using the id attribute,create a bookmark.

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

Input :

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

Input :

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<h3>Creating a download link</h3>
  
   <body>
      <a href = "GeeksforGeeks | A computer science portal for geeks.pdf">Download PDF File</a>
   </body>
      
</html>

chevron_right


Output: :



My Personal Notes arrow_drop_up

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.