Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Specify the Link in HTML and Explain the Target Attribute?
Specifying Links in HTML
HTML links are basically hyperlinks. We can go to another document by clicking on a link. When we move the mouse over a link, the mouse arrow becomes a small hand. Text is not required for a link. A link can be an image or another type of HTML element.
A hyperlink is defined by the HTML <a> tag also known as the anchor tag. The syntax is as follows:
<a href="url">--link text--</a>
The href attribute, which indicates the destination of the link, is the most important attribute of the <a> element. The link text is the part that the reader will see. By clicking on the link text, the reader will be directed to the specified URL address. If there is no href attribute on the <a> tag, it is only a placeholder for a hyperlink.
In all browsers, links will appear as follows by default:
An unvisited link is highlighted using blue color.
A visited link is highlighted using purple color.
An active link is highlighted using red color.
The anchor tag has several attributes, which are listed below.
charset: The character-set is specified by this attribute. HTML 5 does not support it.
download: When the user clicks, it is used to specify the target link to download.
hreflang: It specifies the language of the linked document.
media: It is used to specify the media that is linked.
coords: It is used to specify link coordinates. HTML 5 does not support it.
name: This is the name of the anchor. HTML 5 does not support it hence; we can use the global id attribute instead.
rel: It is used to specify the relationship between the current and linked documents.
shape: It specifies the shape of the link. HTML 5 does not support it.
type: This parameter specifies the type of link.
target: It specifies the link's destination.
rev: It specifies the relationship between the linked document and the current document. HTML 5 does not support it.
Let us take a look at different examples for specifying links in HTML.
Example
In this example we will demonstrate the usage of an image as a link.
<!DOCTYPE html>
<html>
<head>
<title>Using an image as a link</title>
<style>
div{
padding:50px;
width:500px;
height:350px;
background-color:papayawhip;
}
img{
height:100px;
width:300px;
border:2px solid sienna;
}
p{
font-size:18px;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<p>Click on the image to get redirected to the link's destination.<p>
<a href="https://www.tutorialspoint.com/index.htm">
<img src="https://www.tutorialspoint.com/images/logo.png">
</a>
</div>
</body>
</html>
Example
This particular example demonstrates the creation of a link that opens the user’s email.
<!DOCTYPE html>
<html>
<head>
<title>Creating a link to an email address</title>
<style>
div{
padding:50px;
width:300px;
height:150px;
background-color:darkslategrey;
}
p{
font-size:18px;
color:white;
}
a{
color:cornflowerblue;
}
</style>
</head>
<body>
<div>
<p>Creating a link that opens in the user's email using mailto: in the href attribute.</p>
<a href="mailto:contact@tutorialspoint.com">Send email</a>
</div>
</body>
</html>
Example
In this example we will create a link to a JavaScript function.
<!DOCTYPE html>
<html>
<head>
<title>Creating a link to a JavaScript function</title>
<style>
div{
padding:50px;
width:300px;
height:100px;
background-color:lavenderblush;
}
</style>
</head>
<body>
<div>
<a href="javascript:alert('Welcome to the website!');">Click here to execute the JavaScript function.</a>
</div>
</body>
</html>
Target Attribute
The target attribute on a link specifies where the linked page should be opened. A link can open a page in the same tab, a new tab, a new window, or an iframe. If the target parameter is not specified, the link will open in the same tab/window as the current page. The target attribute requires a value for href.
Syntax
<a href="url" target="_self | _blank | _parent | _top | framename" />
Attribute values
_self: Opens the page in the same tab/window as the current one. This is the default setting.
_blank: This command opens the page in a new tab.
_parent: This function opens the page in the parent iframe. If there is no parent, it will be in the same iframe.
_top: Opens the page in the iframe's topmost section. If there is no topmost iframe, it will be in the same iframe.
framename: This function opens the page in a named iframe.
Example
This example demonstrates the usage of the target attribute in the <a> tag with all the attribute values.
<!DOCTYPE html>
<html>
<head>
<title>
Example of HTML <a> target Attribute
</title>
<style>
p{
font-weight:bold;
}
div{
background-color:lightblue;
height:100px;
width:200px;
padding:20px;
}
</style>
</head>
<body>
<p>Opening links at different targets</p>
<div>
<a href="https://www.tutorialspoint.com/index.htm" target="_self">target 1</a><br>
<a href="https://www.tutorialspoint.com/index.htm" target="_blank">target 2</a><br>
<a href="https://www.tutorialspoint.com/index.htm" target="_parent">target 3</a><br>
<a href="https://www.tutorialspoint.com/index.htm" target="_top">target 4</a><br>
<a href="https://www.tutorialspoint.com/index.htm" target="framename">target 5</a>
</div>
</body>
</html>
Clicking on target 1 will open the link in the same window.
Clicking on target 2 will open the link in a new tab.
Clicking on target 3 and 4 will reload the entire window and open the link in the current window because of the absence of iframe.
Clicking on target 5 will open the link in a new window.
141 Views
