Articles → HTML → Anchor Tag In HTML

Anchor Tag In HTML

An anchor tag in HTML links one web page to another.

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

Click to Enlarge

Once you click on the link, you are navigated to page1.html.

Target Attribute In The Anchor Tag

The "Target" attribute specifies where the linked document will be opened. There are 5 possible values of the Target attribute.

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

<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>

Once you click on the link, the linked document i.e., google.com opens in a new window.

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

Click to Enlarge

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

<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>

Once you click on the link, the linked document i.e., google.com opens in the same window.

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

Click to Enlarge

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

<html>

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

<body>
	<iframe src="Page2.html"></iframe>
</body>

</html>

In the preceding code, we have created an iframe and given the source as Page2.html.

In page2.html, add the following code: -

<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>

I have used _self instead of _parent just to show the difference. Now run page1.html, and you see the following output.

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

Click to Enlarge

Now change the Target attribute from _self to _parent. So, the for page2.html will be

<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>

Now click on page1.html again and you see the following output

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

Click to Enlarge

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

To illustrate this, let us create 3 HTML pages

Page1.html

<html>

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

<body>
	<iframe src="Page2.html"></iframe>
</body>

</html>

Page2.html

<html>

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

<body> This is frame 2
	<iframe src="Page3.html"></iframe>
</body>

</html>

Page3.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>

Now click on page1.html, you see the following output

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

Click to Enlarge

So even you make 10 or 20 levels of Iframe, the linked document will be opened in main window of the browser.

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

Page1.html

<html>

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

<body>
	<iframe src="Page2.html" name="framePage1"></iframe>
</body>

</html>

Page2.html

<html>

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

<body> This is frame 2
	<iframe src="Page3.html" name="framePage2"></iframe>
</body>

</html>

Page3.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>

In Page3.html, I have specified target as framePage2 (page2.html). Now click on page1.html, you get the following output

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

Click to Enlarge

Now change the target in page3.html. So page3.html will be

<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>

In the preceding code, target is specified to frame declared in page1.html. Now click on page1.html and you see the following output

Click to Enlarge

Browser Support

Internet Explorer	Firefox	Chrome	Safari	Opera	Edge
Yes	Yes	Yes	Yes	Yes	Yes

Posted By -	Karan Gupta

Posted On -	Saturday, December 26, 2015

Updated On -	Sunday, April 2, 2017

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**