What is the difference between _top and _parent target attribute of Tag in HTML

by

What is the difference between _top and _parent target attribute of <a> Tag in HTML

Answer

_top : If you are using nested frame then it goes to the first / top windows

_parent : If you are using nested frame then it goes to the parent / above windows on which you clicked the link

Example:

This example is based on iframe

Let’s suppose you have three web pages:

  • hyperlink.html
  • frame1.html
  • frame2.html
  • frame3.html

 

On First file hyperlink.html, You need to put 2 frames which are following.

 

hyperlink.html Source Code

<html>
   <head>
   </head>
   <body>

           <iframe src="frame2.html" name="B"><p> This my second iframe</p></iframe>
           <iframe src="frame3.html" name="C"><p> This my third iframe</p></iframe>

   </body>
</html>

This file has 2 frames, first showing frame2.html and 2nd is showing frame3.html

frame1.html Source Code

<html>
     <head>
     </head>
     <body>
         <b>Frame 1</b>
         <a target="_parent" href="https://ravindra24.com/">link</a>
     </body>
</html>

frame2.html Source Code
This file has 1 frame that is showing frame1.html

<html>
          <head>
          </head>
          <body>
                   <b>Frame 2</b>
                   <a target="_self" href="frame3.html">link</a><br/>
                   <iframe src="frame1.html" name="A"><p> This my first iframe</p></iframe>

          </body>
</html>

frame3.html Source Code
This file has 1 frame that is showing frame4.html

<html>
              <head>
              </head>
              <body>
                           <b>Frame 3</b>
                            <a target="_parent" href="https://ravindra24.com/">link</a><br/>
                            <iframe src="frame4.html" name="B"><p> This my second iframe</p></iframe>
              </body>
</html>

frame4.html Source Code

<html>
                 <head>
                 </head>
                 <body>
                            <b>Frame 4</b>
                            <a target="_top" href="https://ravindra24.com/">link</a><br/>
                 </body>
</html>

 

This file has 2 frames and first frame shows frame2.html and this frame.html show showing 1 frame that is showing frame1.html that has _parent value of target attribute which is following.

<a target="_parent" href="https://ravindra24.com/">link</a>

When you click this link, it opens the website in parent window

Now, 2nd frame of hyperlink.html is showing frame3.html that is showing a frame which showing frame4.html that has following link.

<a target="_top" href="https://ravindra24.com/">link</a>

When you click this link, it opens the website in main window.

So I think you might be getting the differences.

Leave a Comment