In HTML, adding links to other pages is essential for creating a connected and interactive web. However, when a user clicks on a link, the default behavior is to open the linked document in the same browser’s tab. Sometimes, you may want to change this behavior and have the linked website open in a new window or tab. This is where the target attribute comes in handy. In this article, we will explore how to use target attribute in HTML to control the behavior of links and improve the user experience.
How to add a target attribute in HTML?
The most basic code for creating a link in HTML looks like the example below:
<a href="http://example.com">Example link</a>As you can see you have an opening <a> tag and a closing </a> tag which wraps some text to be a link (this text is known as an anchor). Moreover, you may notice that this href attribute with the value which is the linked website. In summary, href is an attribute, =”” is an indication of the value, and http://example.com is a value of this attribute). When you want to add target attribute to such a link, you should use a similar notation.
<a href="http://example.com" target="_blank">Example link</a>As you can see in the example above, now we have target which is an attribute, and _blank which is a value of this attribute (this value indicates that this link should open in a new tab).
What values can the target attribute have?
Target attribute can accept four types of values:
- _blank – opens a link in a new tab or window
- _self – open link in the same tab (this is the default value)
- _parent – opens a link in a parent frame (this can be useful for iframes)
- _top – opens a link in a top frame (this also can be used for iframes)
The only important and worth remembering is _blank value. The other three are practically unused because _self is set as default, and _parent or _top are useful only in very specific edge cases.
Now you are able to add a target attribute to any link in HTML to control it’s behavior when user clicks on it.
Leave a Reply