Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Specify the Link in HTML and Explain the Target Attribute?
HTML links are hyperlinks that allow users to navigate between documents by clicking. When you hover over a link, the mouse cursor changes to a pointing hand. Links can be applied to text, images, or any HTML element to make them clickable.
Syntax
The HTML <a> (anchor) tag creates hyperlinks. Following is the basic syntax
<a href="URL">Link Text</a>
The href attribute specifies the destination URL, and the content between the opening and closing tags becomes the clickable link text. Without the href attribute, the <a> tag serves only as a placeholder.
Default Link Appearance
By default, browsers display links with the following colors
Unvisited links Blue and underlined
Visited links Purple and underlined
Active links Red (while being clicked)
Common Link Types
Text Links
The most basic type of link uses text as the clickable element
<!DOCTYPE html> <html> <head> <title>Text Links Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Basic Text Links</h2> <p>Visit <a href="https://www.tutorialspoint.com">TutorialsPoint</a> for programming tutorials.</p> <p><a href="https://www.google.com">Search on Google</a></p> </body> </html>
Image Links
Images can also serve as clickable links
<!DOCTYPE html>
<html>
<head>
<title>Image as Link</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Click the Image to Visit TutorialsPoint</h2>
<a href="https://www.tutorialspoint.com">
<img src="https://www.tutorialspoint.com/images/logo.png" alt="TutorialsPoint Logo" style="width: 250px; height: 80px; border: 2px solid #007bff;">
</a>
<p>Clicking the image above will navigate to TutorialsPoint website.</p>
</body>
</html>
Email Links
The mailto: protocol creates links that open the user's default email client
<!DOCTYPE html> <html> <head> <title>Email Links</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Contact Us</h2> <p>For support, <a href="mailto:contact@tutorialspoint.com">send us an email</a>.</p> <p><a href="mailto:info@tutorialspoint.com?subject=Inquiry&body=Hello, I have a question...">Email with Subject and Body</a></p> </body> </html>
JavaScript Links
Links can execute JavaScript functions using the javascript: protocol
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Links</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>JavaScript Function Link</h2>
<a href="javascript:alert('Welcome to our website!');" style="color: #007bff; text-decoration: underline;">Click here for a welcome message</a>
<br><br>
<a href="javascript:document.body.style.backgroundColor='lightblue';">Change background color</a>
</body>
</html>
Target Attribute
The target attribute specifies where to open the linked document. It determines whether the link opens in the same window, a new tab, or a specific frame.
Syntax
Following is the syntax for the target attribute
<a href="URL" target="_self | _blank | _parent | _top | framename">Link Text</a>
Target Values
The target attribute accepts the following values
_self Opens the link in the same window/tab (default behavior)
_blank Opens the link in a new window or tab
_parent Opens the link in the parent frame (if nested in frames)
_top Opens the link in the full window, breaking out of all frames
framename Opens the link in a named frame or window
Example Target Attribute Usage
Following example demonstrates all target attribute values
<!DOCTYPE html> <html> <head> <title>Target Attribute Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Different Target Values</h2> <p><a href="https://www.tutorialspoint.com" target="_self">Open in same window (_self)</a></p> <p><a href="https://www.tutorialspoint.com" target="_blank">Open in new tab (_blank)</a></p> <p><a href="https://www.tutorialspoint.com" target="_parent">Open in parent frame (_parent)</a></p> <p><a href="https://www.tutorialspoint.com" target="_top">Open in full window (_top)</a></p> <p><a href="https://www.tutorialspoint.com" target="myFrame">Open in named frame (myFrame)</a></p> </body> </html>
The output shows five different links, each demonstrating a different target behavior
Different Target Values Open in same window (_self) Open in new tab (_blank) Open in parent frame (_parent) Open in full window (_top) Open in named frame (myFrame)
Example Frame Targeting
Following example shows how to use named frames with the target attribute
<!DOCTYPE html>
<html>
<head>
<title>Frame Targeting Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Frame Targeting Demo</h2>
<p>Click the links to load content in the frame below:</p>
<p>
<a href="https://www.tutorialspoint.com" target="contentFrame">Load TutorialsPoint</a> |
<a href="https://www.google.com" target="contentFrame">Load Google</a>
</p>
<iframe name="contentFrame" src="about:blank" style="width: 100%; height: 300px; border: 2px solid #ccc;">
Your browser does not support iframes.
</iframe>
</body>
</html>
Important Anchor Attributes
The <a> tag supports several attributes for enhanced functionality
| Attribute | Description | HTML5 Support |
|---|---|---|
href |
Specifies the URL of the linked resource | Yes |
target |
Specifies where to open the linked document | Yes |
download |
Indicates the link should download the resource | Yes |
rel |
Specifies relationship between current and linked document | Yes |
hreflang |
Specifies language of the linked document | Yes |
type |
Specifies media type of the linked resource | Yes |
media |
Specifies what media the linked resource is optimized for | Yes |
480 Views
