Articles → HTML → Anchor tag in HTML

Anchor tag in HTML






Syntax


<a href=”page_name”>text</a>



Sample


<html>

<head>
	<title>Anchor Demo</title>
</head>

<body> <a href="page1.html">Click here to go to page1</a> </body>

</html>



Output


Picture showing the output of anchor tag

Click to Enlarge




Target attribute in anchor tag




  1. blank – Opens the linked document in new window. Consider the following code.


  2. <html>
    
    <head>
    	<title>Anchor Target Demo</title>
    </head>
    
    <body> <a href="http://google.com" target="_blank">Click here to go to google</a> </body>
    
    </html>




    Picture showing the output of anchor tag when target type is _blank

    Click to Enlarge

  3. _self – Opens the linked document in the same window. Consider the following code.


  4. <html>
    
    <head>
    	<title>Anchor Target Demo</title>
    </head>
    
    <body> <a href="http://google.com" target="_self">Click here to go to google</a> </body>
    
    </html>




    Picture showing the output of anchor tag when target type is _self

    Click to Enlarge

  5. _parent - Opens the link in parent window. To check this, we will create 2 files ‘page1.html’ and ‘page2.html’. In page1.html, add following code


  6. <html>
    
    <head>
    	<title>Anchor Target Demo</title>
    </head>
    
    <body>
    	<iframe src="Page2.html"></iframe>
    </body>
    
    </html>






    <html>
    
    <head>
    	<title>Anchor Target Demo</title>
    </head>
    
    <body> <a href="http://google.com" target="_self">Click here to go to google</a> </body>
    
    </html>




    Picture showing the output of anchor tag when _self is used instead of _parent

    Click to Enlarge



    <html>
    
    <head>
    	<title>Anchor Target Demo</title>
    </head>
    
    <body> <a href="http://google.com" target="_parent">Click here to go to google</a> </body>
    
    </html>




    Picture showing the output of anchor tag when target type is _parent

    Click to Enlarge

  7. _top – Opens the link in full body of window.






  8. <html>
    
    <head>
    	<title>Anchor Target Demo</title>
    </head>
    
    <body>
    	<iframe src="Page2.html"></iframe>
    </body>
    
    </html>




    <html>
    
    <head>
    	<title>Anchor Target Demo</title>
    </head>
    
    <body> This is frame 2
    	<iframe src="Page3.html"></iframe>
    </body>
    
    </html>




    <html>
    
    <head>
    	<title>Anchor Target Demo</title>
    </head>
    
    <body> <a href="http://google.com" target="_top">Click here to go to google</a> </body>
    
    </html>




    Picture showing the output of anchor tag when target type is _top

    Click to Enlarge



  9. Framename – Open the target document in the specified frame. Consider Page1.html, page2.html and page3.html again




  10. <html>
    
    <head>
    	<title>Anchor Target Demo</title>
    </head>
    
    <body>
    	<iframe src="Page2.html" name="framePage1"></iframe>
    </body>
    
    </html>




    <html>
    
    <head>
    	<title>Anchor Target Demo</title>
    </head>
    
    <body> This is frame 2
    	<iframe src="Page3.html" name="framePage2"></iframe>
    </body>
    
    </html>




    <html>
    
    <head>
    	<title>Anchor Target Demo</title>
    </head>
    
    <body> <a href="http://google.com" target="framePage2">Click here to go to google</a> </body>
    
    </html>




    Picture showing the output of anchor tag when target type is frame

    Click to Enlarge



    <html>
    
    <head>
    	<title>Anchor Target Demo</title>
    </head>
    
    <body> <a href="http://google.com" target="framePage1">Click here to go to google</a> </body>
    
    </html>




    Picture showing the output of anchor tag when target type is frame

    Click to Enlarge



Browser support


Internet ExplorerFirefoxChromeSafariOperaEdge
YesYesYesYesYesYes



Posted By  -  Karan Gupta
 
Posted On  -  Saturday, December 26, 2015
 
Updated On  -  Sunday, April 2, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250