111

I know _blank opens a new tab when used with the anchor tag and also, there are self-defined targets I use when using framesets but I will like to know the difference between _parent, _self and _top.

5 Answers 5

155

While these answers are good, IMHO I don't think they fully address the question.

The target attribute in an anchor tag tells the browser the target of the destination of the anchor. They were initially created in order to manipulate and direct anchors to the frame system of document. This was well before CSS came to the aid of HTML developers.

While target="_self" is default by browser and the most common target is target="_blank" which opens the anchor in a new window(which has been redirected to tabs by browser settings usually). The "_parent", "_top" and framename tags are left a mystery to those that aren't familiar with the days of iframe site building as the trend.

target="_self" This opens an anchor in the same frame. What is confusing is that because we generally don't write in frames anymore (and the frame and frameset tags are obsolete in HTML5) people assume this a same window function. Instead if this anchor was nested in frames it would open in a sandbox mode of sorts, meaning only in that frame.

target="_parent" Will open the in the next level up of a frame if they were nested to inside one another

target="_top" This breaks outside of all the frames it is nested in and opens the link as top document in the browser window.

target="framename This was originally deprecated but brought back in HTML5. This will target the exact frame in question. While the name was the proper method that method has been replaced with using the id identifying tag.

<!--Example:-->

<html>
<head>
</head>
<body>
<iframe src="url1" name="A"><p> This my first iframe</p></iframe>
<iframe src="url2" name="B"><p> This my second iframe</p></iframe>
<iframe src="url3" name="C"><p> This my third iframe</p></iframe>

<a href="url4" target="B"></a>
</body>
</html>
0
49

Below is an image showing nested frames and the effect of different target values, followed by an explanation of the image.

Different target values.1

Imagine a webpage containing 3 nested <iframe> aka "frame"/"frameset". So:

  • the outermost webpage/browser is the starting context
  • the outermost webpage is the parent of frame 3
  • frame 3 is the parent of frame 2
  • frame 2 is the parent of frame 1
  • frame 1 is the innermost frame

Then target attributes have these effects:

  • If frame 1 has a link with target="_self", the link targets frame 1 (i.e. the link targets the frame containing the link (i.e. targets itself))
  • If frame 1 has a link with target="_parent", the link targets frame 2 (i.e. the link targets the parent frame)
  • If frame 1 has a link with target="_top", the link targets the initial webpage (i.e. the link targets the topmost/outermost frame; (in this case; the link skips past the grandparent frame 3))
    • If frame 2 has a link with target="_top", the link also targets the initial webpage (i.e. again, the link targets the topmost/outermost frame)
  • If any of these frames has a link with target="_blank", the link targets an auxiliary browsing context, aka a "new window"/"new tab"
3
  • 1
    Please explain your "answer". This image is not clear on its own. Sep 6, 2020 at 7:38
  • 2
    Correct me if I'm wrong. This is my understanding when I look at the image: 1. _parent - a link in Frame 1 opens in Frame 2 when clicked. 2. _self - a link in Frame 1 opens in Frame 1 when clicked. 3. _blank - any links will open in a new tab when clicked regardless of which frame it actually is in even when it is in a nested iframes. 4. _top - a link will open in the current tab when clicked regardless of which frame it actually is in even when it is in a nested iframes.
    – motss
    Oct 23, 2020 at 17:18
  • 1
    Hi, @SherylHohman , I tried to add an explanation to the image. Hi, Binaya are you OK with the language I used in my explanation? (I think explanations are helpful for accessibility (i.e. visually impaired users) , translation to other languages, search engines, etc) Thanks. Feb 18, 2021 at 15:51
17

target="_blank"

Opens a new window and show the related data.

target="_self"

Opens the window in the same frame, it means existing window itself.

target="_top"

Opens the linked document in the full body of the window.

target="_parent"

Opens data in the size of parent window.

3
  • 1
    What does 'full body' mean?
    – robsch
    Mar 2, 2015 at 14:37
  • @robsch see James Johnson's answer
    – Joseph Rex
    Apr 30, 2015 at 15:44
  • then what is target="_main" attribute talks about? Aug 17, 2020 at 11:09
16

Section 6.16 Frame target names in the HTML 4.01 spec defines the meanings, but it is partly outdated. It refers to “windows”, whereas HTML5 drafts more realistically speak about “browsing contexts”, since modern browsers often use tabs instead of windows in this context.

Briefly, _self is the default (current browsing context, i.e. current window or tab), so it is useful only to override a <base target=...> setting. The value _parent refers to the frameset that is the parent of the current frame, whereas _top “breaks out of all frames” and opens the linked document in the entire browser window.

1
7

Here is a practical example of Anchor tag with different

Target Attribute

4
  • 3
    Please copy the relevant parts of your linked article to SO for posterity.
    – Tom
    Dec 4, 2019 at 22:06
  • Link-only responses are not considered answers on SO. As is this is a great example of a useful comment. To be considered am answer, you need to embed relevant info from the linked page directly into your post. See SO help pages for more info. Sep 6, 2020 at 7:46
  • The link is not available anymore! Sep 29, 2020 at 14:35
  • 1
    @RevnicRobert-Nick have restored the link Nov 15, 2020 at 12:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.