Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML target Attribute

Posted in HTML Tutorial
Updated on Sep 22, 2024
By Mari Selvan
👁️ 109 - Views
⏳ 4 mins
💬 1 Comment
HTML target Attribute

Photo Credit to CodeToFun

🙋 Introduction

In HTML, the target attribute is a powerful tool used with hyperlinks to specify where the linked document should be displayed.

By default, when a user clicks on a link, the new document opens in the same browser window or tab.

However, the target attribute allows developers to control this behavior and determine whether the link should open in a new window, a new tab, or within a specific frame.

🎯 Purpose of target

The primary purpose of the target attribute is to define the browsing context for the linked document.

This attribute provides flexibility in how users interact with linked content, allowing developers to tailor the user experience according to their application's needs.

💎 Values

The target attribute accepts several values, each influencing where the linked document will be displayed. The commonly used values are:

  • _blank: Opens the linked document in a new, unnamed browser window or tab.
    _blank.html
    Copied
    Copy To Clipboard
    <a href="https://www.example.com" target="_blank">Visit Example.com</a>
  • _self (Default): Opens the linked document in the same browsing context (same window or tab).
    _self.html
    Copied
    Copy To Clipboard
    <a href="https://www.example.com" target="_self">Visit Example.com</a>
  • _parent: Opens the linked document in the parent frame, if the current document is inside a frame.
    _parent.html
    Copied
    Copy To Clipboard
    <a href="https://www.example.com" target="_parent">Visit Example.com</a>
    
  • _top: Opens the linked document in the full, original window, breaking out of any frames.
    _top.html
    Copied
    Copy To Clipboard
    <a href="https://www.example.com" target="_top">Visit Example.com</a>
  • framename: Specifies the name of the frame where the linked document should be displayed.
    framename.html
    Copied
    Copy To Clipboard
    <a href="https://www.example.com" target="myFrame">Visit Example.com</a>

📄 Example

Let's explore a simple example of how to use the target attribute in an HTML hyperlink:

target.html
Copied
Copy To Clipboard
<a href="https://www.example.com" target="_blank">Visit Example.com</a>

🧠 How it Works

In this example, the link to https://www.example.com will open in a new, unnamed browser window or tab due to the target="_blank" attribute.

🔄 Dynamic Values with JavaScript

The target attribute can also be dynamically set using JavaScript.

This is useful when you need to change the target based on certain conditions or user interactions. Here's a basic example:

target.html
Copied
Copy To Clipboard
<script>
  // Dynamically set target for a hyperlink
  document.getElementById("dynamicLink").target = "_parent";
</script>

🧠 How it Works

In this script, the target attribute is set to _parent for a hyperlink with the id dynamicLink. This would cause the linked document to open in the parent frame if the current document is inside a frame.

🏆 Best Practices

  • Consider user experience when choosing the target attribute value. Opening links in new windows or tabs may affect the flow of navigation, so use it judiciously.
  • Be aware that some users may have pop-up blockers enabled, which can interfere with links that attempt to open in new windows.
  • Test your links across various browsers to ensure consistent behavior.

🎉 Conclusion

The target attribute is a valuable tool for controlling how linked documents are displayed in HTML.

By understanding and utilizing this attribute effectively, developers can provide a more tailored and user-friendly browsing experience.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Mari Selvan
8 months ago

If you have any doubts regarding this article (HTML target Attribute), please comment here. I will help you immediately.

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy