What is Anchor Tag

Anchor Tag or HTML Anchor Tag defines a Hyperlink in html document. A hyperlink can be Internal Link or External Link. A hyperlink links a webpage with other webpages and external pages.

In HTML5, an anchor tag can contain both block level and inline level elements. That means, we can write text, image or a div inside anchor tag. Also anchor tag with href is known as hyperlink.

Hyperlink Examples

Hyperlinks Examples with code

	<a href="">Link 1</a>                              ( Blank Link)
	<a href="contact.html">Link 2</a>                  ( Relative link)
	<a href="http://www.domain.com">Tech Altum</a>     ( Absolute Link);
	<a href="#body">Go To Top</a>                      ( Internal Link);
	<a href="mailto:mail@domain.com">Mail Me</a>       ( Mail Link);
	<a href="tel:9090909090">Call Me</a>               ( Click to call Link);

Hyperlink on a webpage

Link 1
Link 2
Tech Altum
Go To Top
Mail Me
Call Me

Properties of an anchor tag

Hypertext Reference ( href="")

href attribute is used in an anchor tag to specify the URL( Uniform Resource Location) of the page link to go. It can be a relative link, absolute link or an id.

Relative Link

A relative Link is used to link pages within same domain.

Example of Relative link

	<a href="contact.html">Link 1</a>   	( Relative link in same directory)
	<a href="blog/blog1.html">Link 2</a>   	( Relative link in child directory)
	<a href="../cart.html">Link 3</a>   	( Relative link in parent directory)

Absolute Link

An Absolute Link is used to link pages from their Absolute Path. for exp
<a href="http://www.domain.com">Link</a> is an Absolute Link as it contains domain name and page.

Example of Absolute link?

<a href="http://www.domain.com">Link</a>                                    ( Absolute Link) 

<a href="https://www.facebook.com/thetechaltum">Join us on Facebook</a>      ( Our facebook page)

Target attribute

A target attribute ( target="" ) is used to tell window where to open that particular link.
Various values of target

  1. _self ( By Default) Open the link in same window
  2. _blankopen link in new tab
  3. name of frame( iframe or frame)Open the link on frame whose name is there

Values of Target attribute

<iframe name="frame1" ></iframe>

    <a href="http://www.techaltum.com" target="_self">_self</a><br>
	<a href="http://www.techaltum.com" target="_blank">_blank</a><br>
	<a href="webdesigning.html" target="frame1">frame1</a><br>

Click on the link to see behavior of following target