Get clarified with html target attribute
The attribute target is associated with link. When anybody clicks a link, the linked page opens in the same window or separate window or in the same frame. By using target, we can control where to open the link. In this tutorial, we ‘re going to clarify everything about this html target attribute.
Noted, it is just a beginner-level approach. Those who are advanced in this field but get confused of target attribute, may also check out the whole presentation.
Using target attribute with a [Link] element
The html element that we can use target attribute with are:
<a><area><base><form>
However, we’re going to focus only on the a element in this tutorial. This means, here is how we can specify where to open the linked document when we create a link with <a>.
Target Values
- _self: Opens link in the same frame where the link appears. It is default. If you choose this, you needn’t specify at all.
- _blank: Opens the linked page in new window or new tab.
- _top: Opens the linked page covering the full body of the window.
- _parent: Opens in parent frame.
- _framename: Opens page in a named frame.
What do all these target values mean practically
target:_self:
First let’s take an a element with href attribute with value https://www.netplanter.com. Use target="_self". As this is default it the same whether you use it or not.
<a src="https://www.netplanter.com" target="_self"> Go to Netplanter</a>
Now click the link, Netplanter Home page will open in the same window you are now activating.
target:_blank:
Now change the above code replacing _self with blank.
<a src="https://www.netplanter.com" target="_blank"> Go to Netplanter</a>
Netplanter Home page will open in a new tab.
target:_top:
Now rewrite the above code using target="top".
<a src="https://www.netplanter.com" target="_top"> Go to Netplanter</a>
Linked page will open in the top browsing context or in current tab.
Click and see:
target:_parent:
Again rewrite the above code using target="parent".
<a src="https://www.netplanter.com" target="_parent"> Go to Netplanter</a>
Linked URL Will open the in the next level up of a frame if they were nested to inside one another.
target: framename:
This part should be present differently. First take an iframe. We clarified this html element in another tutorial. Please go through that article first if you’re not sure of what it is. In the iframe take a name attribute with a suitable name value (here ‘MyFrame’) as you like as shown below:
<iframe
src="https://www.netplanter.com/wp-content/uploads/2020/02/ORCHID-1.jpg"
height="250px"
width="100%"
name="MyFrame">
</iframe>
Now take the a element with the same name value of target attribute as shown below:
<a src="https://www.netplanter.com" target="MyFrame"> Go to Netplanter</a>
Now accumulate the codes.
<iframe
src="https://www.netplanter.com/wp-content/uploads/2020/02/ORCHID-1.jpg"
height="250px"
width="100%"
name="MyFrame">
</iframe>
<a src="https://www.netplanter.com" target="MyFrame"> Go to Netplanter</a>
Now in the Output, click the link. The link will open in the Iframe above the link not in browser tab as a whole.
Iframe
Hope you got the gist of this tutorial “Get clarified with html target attribute” enjoyable way.
