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 change the target of a link in HTML?
The target attribute of the <a> tag controls where a link opens when clicked. This attribute allows you to specify whether the link should open in the same window, a new tab, or in specific frames within a frameset.
Syntax
Following is the syntax to change the target of a link in HTML −
<a href="URL" target="target_value">Link text</a>
Target Attribute Values
The target attribute accepts the following values −
_blank − Opens the link in a new tab or window.
_self − Opens the link in the current tab or window (default behavior).
_parent − Opens the link in the parent frame if using framesets.
_top − Opens the link in the top-level frame, breaking out of all frames.
framename − Opens the link in a named frame or iframe.
Using _blank Target
The _blank value is most commonly used to open links in a new tab, which is helpful for external links that you don't want users to navigate away from your site.
Example
<!DOCTYPE html>
<html>
<head>
<title>Target _blank Example</title>
<style>
a {
color: #2196f3;
text-decoration: none;
padding: 8px 12px;
margin: 5px;
border: 1px solid #2196f3;
border-radius: 4px;
display: inline-block;
}
a:hover {
background-color: #2196f3;
color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>External Links (Open in New Tab)</h2>
<p>Click these links to open them in a new tab:</p>
<a href="https://www.tutorialspoint.com" target="_blank">TutorialsPoint</a>
<a href="https://www.google.com" target="_blank">Google</a>
<a href="https://www.github.com" target="_blank">GitHub</a>
</body>
</html>
When you click on any of these links, they will open in a new tab, keeping the original page accessible −
External Links (Open in New Tab) Click these links to open them in a new tab: [TutorialsPoint] [Google] [GitHub] (styled as buttons)
Using _self Target
The _self value opens the link in the current tab or window. This is the default behavior, so specifying target="_self" is optional.
Example
<!DOCTYPE html> <html> <head> <title>Target _self Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Internal Navigation</h2> <p>These links open in the same tab:</p> <a href="#section1" target="_self">Go to Section 1</a> | <a href="#section2">Go to Section 2</a> (no target specified) <div style="height: 300px;"></div> <h3 id="section1">Section 1</h3> <p>This is section 1 content.</p> <h3 id="section2">Section 2</h3> <p>This is section 2 content.</p> </body> </html>
Both links behave identically, navigating within the same page −
Internal Navigation These links open in the same tab: Go to Section 1 | Go to Section 2 (no target specified)
Using _parent and _top Targets
The _parent and _top targets are primarily used with framesets, which are rarely used in modern web development. However, they can be relevant when working with iframes.
Example − Frame Targets
<!DOCTYPE html>
<html>
<head>
<title>Frame Target Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Frame Target Demonstration</h2>
<p>Links with different frame targets:</p>
<a href="https://www.example.com" target="_parent">Open in Parent Frame</a><br><br>
<a href="https://www.example.com" target="_top">Open in Top Frame</a><br><br>
<iframe src="data:text/html,<p style='padding:10px;'>This is an iframe. In a real frameset, the parent and top targets would behave differently.</p>"
width="100%" height="100" style="border: 1px solid #ccc;">
</iframe>
</body>
</html>
In this example, _parent and _top will behave similarly since there's no complex frame hierarchy −
Frame Target Demonstration Links with different frame targets: Open in Parent Frame Open in Top Frame [iframe content showing example text]
Using Named Targets
You can also specify a custom frame or window name as the target value to open links in specific named contexts.
Example
<!DOCTYPE html>
<html>
<head>
<title>Named Target Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Named Target Links</h2>
<p>Click these links to open content in the named iframe:</p>
<a href="data:text/html,<h2>TutorialsPoint Home</h2><p>Welcome to TutorialsPoint!</p>"
target="contentFrame">Load TutorialsPoint</a> |
<a href="data:text/html,<h2>About Us</h2><p>Learn more about our tutorials.</p>"
target="contentFrame">Load About</a>
<h3>Content Area:</h3>
<iframe name="contentFrame" width="100%" height="150"
style="border: 2px solid #4CAF50; border-radius: 4px;">
<p>Click a link above to load content here.</p>
</iframe>
</body>
</html>
The links target the named iframe "contentFrame", loading different content within it −
Named Target Links Click these links to open content in the named iframe: Load TutorialsPoint | Load About Content Area: [iframe showing loaded content based on clicked link]
Best Practices
When using the target attribute, consider these recommendations −
Use
target="_blank"for external links to keep users on your site.Add
rel="noopener"withtarget="_blank"for security reasons.Use
target="_self"or no target for internal navigation.Avoid
_parentand_topunless working with framesets.
Security Example
<a href="https://external-site.com" target="_blank" rel="noopener"> Safe External Link </a>
Conclusion
The target attribute provides control over where links open, with _blank being most useful for external links and _self for internal navigation. Always consider user experience and security when choosing target values, and use rel="noopener" with target="_blank" for external links.
9K+ Views
