HTML Link Tags, Types of Link, Link Tag Attributes

0
293
html link

HTML Link

The HTML <a> tag defines a hyperlink to use for html link.

A hyperlink (or link) is a word, group of words, image or mail that you can click on to jump to another document/file/link.

The <a> tells where the link should start and the </a> indicates where the link ends.

Everything between these two will work as a link.

When you move the cursor over a link in a web page, the arrow will turn into a little hand.

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

By default, a link will appear as follows in all browsers:

  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple.
  • An active link is underlined and red.

There are three types of a link uses in HTML.

  1. Text Link
  2. Image Link
  3. Mail Link

HTML Text Link

It is common to use text or group of texts as link

<a href="http://developersfunda.com/">Developers Funda</a>

HTML Image Link

It is common to use image as link

<a href="http://developersfunda.com/" target="_self"><img src="images/logo.png"></a>

HTML Mail Link

It is common to use mail as link

<a href= "mailto:abc@example.com">Send Email</a>

Example to use a link tag

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Link Tag Example</title>
</head>
<body>
   <a href="http://developersfunda.com">Developers Funda</a>
   <a href="http://developersfunda.com/" target="_self"><img src="images/logo.png"></a>
   <a href= "mailto:support@developersfunda.com">Send Email</a>
</body>
</html>

HTML Target Attribute

Target Attribute is used to specify the location where a linked document is opened. Following are possible options:

Option Description
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same frame.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
targetframe Opens the linked document in a named target frame.

 

Example:

<!DOCTYPE html>
<html>
 <head>
   <title>Hyperlink Example</title>
 </head>
 <body>
   <p>Click any of the following links</p>
   <a href="http://developersfunda.com/" target="_blank">Opens in New</a>
   <a href="http://developersfunda.com/" target="_self">Opens in Self</a>
   <a href="http://developersfunda.com/" target="_parent">Opens in Parent</a>
   <a href="http://developersfunda.com/" target="_top">Opens in Body</a>
 </body>
</html>

LEAVE A REPLY

Please enter your comment!
Please enter your name here