Links in HTML are used to connect the content of web resource from one to another, it is basically an HTML element which allows you to jump on another location after tapping on the Link,

It is defined by the HTML tags and attributes and it is used for navigating between the webpages. Let us understand HTML Links in detail.

What is HTML Link?

HTML Links are known as Hyperlinks that contains various link tags that provide navigation to the other page resources and also the specific part of the current HTML document on the website.

HTML Link is defined by using anchor <a> tag and with the help of href attribute. it starts with the source anchor and points to the destination attribute. we can attach text, video, images, and other HTML elements to the link and after clicking on the link it will redirect to the required HTML document.

Syntax of HTML Link

<a href=”URL”> HTML link text</a>

It starts with the opening <a> tag and ends with closing </a> tag in between the href attribute which specifies the path of the link. The link text of the HTML element is the visible part of the link displayed on the webpage. for the styling of HTML, Links CSS is used. Different color format for the Link as per viewed given below:

HTML Link which is unvisited is by default blue in color.
HTML Link which is visited is by default and is underlined and purple in color.
HTML Link which is active is by default and is underlined and red in color.

Features of HTML Link

Target Attribute: It indicates the location where the linked document is opened and display it on the webpage, The target Attribute values are given below.

_self – This is a default target attribute. Opens the document in the same window or tab as it was clicked.
_blank – This attribute value opens the document in a new window or tab.
_parent -This attribute opens the document in the parent frame.
_top -This attribute opens the document in the full body of the window.

Example of showing the use of Target Attributes :

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://codedec.com/">
   </head>
  
   <body>
      <p>link to the url with the different target attribute</p>
      <a href = "/html/index.htm" target = "_blank">opens in new page</a> |
      <a href = "/html/index.htm" target = "_self">Self value</a> |
      <a href = "/html/index.htm" target = "_parent">Parent value</a> |
      <a href = "/html/index.htm" target = "_top"> Body value</a>
   </body>

</html>

OUTPUT:

Types of HTML Links

1. Using HTML Text Link : It is used to add Link in the Text document of the HTML element inside the <a> tag .

Example :

<!DOCTYPE html> 
<html> 
 <h3> Example of Adding a HTML text link</h3> 
   <body> 
      <p>Click on the text link</p> 
      <a href = "https://codedec.com/">Codedec</a> 
   </body> 
      
</html>

OUTPUT :

2. Using HTML Image Link: It is used to add images in the HTML Link by using <img> tag inside the <a> tag, it can be used for specifying URL and we can also adjust the position of the image with the coordinates.

Example :

<!DOCTYPE html> 
<html> 
<body> 

<h3>Using html image link</h3> 

<p>TO visit codedec website click the logo</p> 

<a href="https://codedec.com/"> 
<img src="/home/aman/Desktop/gg/CodedecLogo.png" alt="Codedec"
style="width:100px;height:100x;border:0"> 
</a> 

</body> 
</html>

OUTPUT:

3. Using HTML Email Link: It is used to add an email Link on the webpage using <a> tag which specifies the email address to send an email. While using <a> tag as an email tag, we will use the tag mailto: email address along with href attribute.

<a href = “mailto: xyz@your id.com”>Sending Email</a>

we can also add subjects in the email

<a href=”mailto:xyz@your idl.com?subject=Your subject”>xyz@your id.com</a>

Example:

<!DOCTYPE html>
<html>
<body>

<h1>HTML Email Link </h1>

<p><a href="mailto:XYZ@YOUR ID.com">Email Codedec!</a>
</p>

</body>
</html>

OUTPUT:

After clicking the email link the mail window will open.