Home
HTML

HTML Links - Hyperlinks

A link is connection from one web resource to another web resource. It is also known as Hyperlink or web link. These link contains an address for....

In this article, you will learn about HTML Links, how to create hyperlinks in html, the target Attributes of html hyperlink and also learn about the implementation of different Link Colours in HTML with the help of examples.

HTML Links - Hyperlinks

What is a link (Hyperlink) in HTML?

A link is connection from one web resource to another web resource. It is also known as Hyperlink or web link. These link contains an address for a destination and acts as a reference to data. It can be a piece of text, an icon, an image, or a graphic that whenever you click on it, It points to and navigates you to a destination webpage or html document. 

Thus, we can freely say that links are clickable pointers to a resource.

Basically, link has two ends that are called anchors. The link starts at the source anchor and point to a destination anchor which can be an image, an audio or video clip, a PDF file or an HTML document.

Syntax

In HTML, links are defines by using <a> tag.

<a href="url">link text</a>

Now, let's understand html links with the help of following example;

<!DOCTYPE html>
<html>
   <head>
      <title>Html Link - Hyperlink</title>
   </head>
   <body>
      <p>India's most trusted website for learning basics of programming languages and tutorials. We serve best content on html, python, java, swift etc. click on the following link:</p>
      <a href="https://www.answersjet.com/">Answersjet - Learn Programs and Tutorials</a>
   </body>
</html>

Output

India's most trusted website for learning basics of programming languages and tutorials. We serve best content on html, python, java, swift etc. click on the following link:

Answersjet - Learn Programs and Tutorials

Internal link

Internal Links are hyperlinks that target the same domain as the domain that the link exists on source.

Now let's understand internal link with the help of following example;

<!DOCTYPE html>
<html>
   <head>
<title>Html Internal Link And External Link Example</title>
  </head>
      <body>
<p><a href="html_contribute.asp/">Answersjet -Contribute</a> It is a link to the contribute page on same website</p>
<p><a href="https://www.answersjet.com/">Answersjet - Porgrams and Tutorials</a> It is a link to the Answersjet website on the WWW.</p>
     </body>
</html>

Output

Answersjet -Contribute: It is a link to the contribute page on same website

Answersjet - Porgrams and Tutorials: It is a link to the Answersjet website on the WWW.

Button as a link

Using certain html and css properties, we can also create a button on a webpage or a document that will act as a link.

Now, let's understand this with the help of following example;

<!DOCTYPE html>
<html>
<head>
<title>Button as a link in Html Example</title>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>
<h2>Button as a link in html</h2>
<p>In the following, a link styled as a button:</p>
<a href="https://www.answersjet.com" target="_blank">Answersjet</a>
</body>
</html>

Output

Button as a link in html

Link Titles

The title attribute is used to defines extra information about an element. Whenever the mouse moves over the element it will shows the information as a tooltip text.

In the following example, we have used title attribute inside the <a> tag to specifies the extra information about an link element.

<!DOCTYPE html>
<html>
  <head>
<title>HTML Link Title attribute Example</title>
  </head>
     <body>
<p>India's most trusted website for learning basics of programming languages and tutorials. We serve best content on html, python, java, swift, c++, etc. Visit Now:</p>
<a href="https://www.answersjet.com/" title="Programs and Tutorials">Answersjet</a>
     </body>
</html>

Output

India's most trusted website for learning basics of programming languages and tutorials. We serve best content on html, python, java, swift, c++, etc. Visit Now:

Answersjet

The target Attribute in HTML Link

The target attribute of html defines where to open the linked document. By default, the linked page will be displayed in the current browser window but this can also be changed. In order to change this, you must specify another target for the link. In the following table, there are the various possible options to specify another target for the link.

S.No Value Description
1. _blank To open a document in new window.
2. _parent To open a document in parent frame.
3. _self To open a document in same window in which it was clicked.
4. _top To open a document in window's full body.

Now, let's understand the basic difference of above mentioned values with the help of following example;

<!DOCTYPE html>
<html>
   <head>
      <title>Html link target attribute Example</title>
   </head>
   <body>
      <p>In the following, we have used different values of target attribute of html links:</p>
      <a href="https://www.answersjet.com" target="_blank">Opens in New</a> |
      <a href="https://www.answersjet.com" target="_self">Opens in Self</a> |
      <a href= "https://www.answersjet.com" target="_parent">Opens in Parent</a> |
      <a href="https://www.answersjet.com" target="_top">Opens in Body</a>
   </body>
</html>

Output

Opens in New | Opens in Self | Opens in Parent | Opens in Body

Html Link - Color

An HTML link is displayed in a different color depending on whether it is viewed, not viewed, or active. Different types of links appear in different formats on every browser such as:

• An unseen link is underlined and blue by default.

•A visited link is underlined and purple by default.

• An active link is underlined and red by default.

But by using CSS, you can change the link state colors.

Now, let's illustrate how to change html link color with the help of following example;

Here, an unvisited link will be Pink with no underline. A visited link will be green with no underline. An active link will be red and underlined. And whenever we mousing over a link (a:hover) it will become purple and underlined.

<!DOCTYPE html>
<html>
<head> 
<title>Changing Html link color Example</title>
<style>
a:link {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: purple;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>
<h2>Changing Html Link Colors</h2>
<p>You can change the default colors of links</p>
<a href="https://www.answersjet.com" target="_blank">HTML Images</a> 
</body>
</html>

Output

Changing Html Link Colors

Using image as a link in html

You can use image as a link in html by adding <img> tag inside <a> tag.

In the following example, we have discussed how to set an image as a link in HTML;

<!DOCTYPE html> 
<html> 
<head> 
    <title> set image as a link example</title> 
</head> 
<body> 
    <a href="https://www.answersjet.com">  
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2WU3sZUhSoB83A-uMgQLk_4RwK38JfOqhuQ&usqp=CAU" alt="Answersjet logo" />
    </a>
</body> 
</html>

Output

Answersjet logo

Create a Bookmark link in HTML

Bookmark came in handy when the web pages are very long. In order to create a Bookmark link html we just have to create a Bookmark and the we have add a link to that bookmark. So, whenever you will click the link then you will reach the location with the bookmark.

1. First of all, use the id attribute to create a bookmark:

<h2 id="L4">Line 4</h2>

2. Then, add a link to the bookmark ("Jump to line 4"), from within the same page

<!DOCTYPE html>
<html>
<head>
<title>Create a Bookmark link in HTML Example</title>
</head>
   <body>
<p><a href="#L4">Jump to Line 4</a></p>
<p><a href="#L10">Jump to Line 10</a></p>
<h2>Line 1</h2>
<p>This is a first line.</p>
<h2>Line 2</h2>
<p>This is a second line.</p>
<h2>Line 3</h2>
<p>This is a third line.</p>
<h2 id="L4">Line 4</h2>
<p>This is a fourth line.</p>
<h2>Line 5</h2>
<p>This is a fifth line.</p>
<h2>Line 6</h2>
<p>This is a sixth line.</p>
<h2>Line 7</h2>
<p>This is a seventh line.</p>
<h2>Line 8</h2>
<p>This is a eighth line</p>
<h2>Line 9</h2>
<p>This is a ninth line.</p>
<h2 id="L10">Line 10</h2>
<p>This is a tenth line.</p>
<h2>Line 11</h2>
<p>This is a eleventh line.</p>
   </body>
</html>

Output

Create a Bookmark link in HTML Example

Conclusion

Above we have discussed about HTML Links, how to create hyperlinks in html, the target Attributes of html hyperlink and also learn about the implementation of different Link Colours in HTML with the help of examples. A link is connection from one web resource to another web resource. It is also known as Hyperlink or web link.