What is a link?
“A hyperlink is like a bridge connecting one web resource to another. It has two key parts: an anchor (the starting point) and a destination (where it leads). The link begins at the ‘source’ anchor and directs you to the ‘destination’ anchor, which could be anything on the web like an image, a video, a sound file, a program, another web page, or even a specific part of a web page.
Think about websites or social media platforms, such as YouTube or Instagram, where you click on an image or text, and it takes you to another web page or resource. This is made possible using the ‘a’ tag in HTML, which acts as a connector. With the ‘a’ tag, you can link one part of your code to another part, whether it’s within your code or external.
HTML Link Syntax: This is the way we write the code that creates these connections between elements, making navigation on the web seamless.”
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. “href” stands for Hypertext reference.
Text link : The text link is the visible part of the link.
It is what the viewer clicks on.
<!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>
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.
<!DOCTYPE html>
<html>
<h3>Internal Link And External Link Example</h3>
<body>
<!–internal link–>
<p>
<a href=”html_contribute.asp/”>
GeeksforGeeks Contribute
</a>
It is a link to the contribute page on GeeksforGeeks’ website.
</p>
<!–external link–>
<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>
Changing Link Colours in HTML
Different types of links appear in different formats such as:
<!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”>
</a>
<p>hovering effect</p>
<a href=”https://www.geeksforgeeks.org”>
GeeksforGeeks
</a>
</body>
</html>
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:
<!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=”_top”>
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=”_parent”>
GeeksforGeeks
</a></body>
</html>
Using Image as a Link in HTML
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 <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 )
Input:
<!DOCTYPE html>
<html>
<body>
<h3>Using Image as a link</h3>
<p>Click on the image to visit GeeksforGeeks homepage.</p>
<a href=”https://www.geeksforgeeks.org”>
<img src=”https://media.geeksforgeeks.org/gfg-gg-logo.svg”
alt=”GeeksforGeeks”
style=”width:80px;height:80px;border:0″>
</a>
</body>
</html>
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:
<!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>
Creating a download link in HTML
A text link of a pdf, doc or zip file can be created to make it downloadable.
Input :
<!DOCTYPE html>
<html>
<h3>Creating a download link</h3>
<body>
<a href=”GeeksforGeeks.pdf”>
Download PDF File
</a>
</body>
</html>
Not a member yet? Register now
Are you a member? Login now