Difference between self top and parent in the anchor tag target attribute

Question

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

User · Answer

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"
- This applies to frame 3, frame 2, frame 1, and the outermost webpage. Be careful of "tabnabbing" in case of target="_blank"; use the rel="noopener" attribute

User · Answer

Here is a practical example of Anchor tag with different  Target Attribute

User · Answer

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

User · Answer

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  lt base target     gt  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

User · Answer

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    lt  --Example -- gt    lt html gt   lt head gt   lt  head gt   lt body gt   lt iframe src  url1  name  A  gt  lt p gt  This my first iframe lt  p gt  lt  iframe gt   lt iframe src  url2  name  B  gt  lt p gt  This my second iframe lt  p gt  lt  iframe gt   lt iframe src  url3  name  C  gt  lt p gt  This my third iframe lt  p gt  lt  iframe gt    lt a href  url4  target  B  gt  lt  a gt   lt  body gt   lt  html gt

[html] Difference between _self, _top, and _parent in the anchor tag target attribute

Examples related to html

Examples related to hyperlink

Examples related to anchor