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.

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 

Hyperlink on a webpage

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

Properties of hyperlink

  • Default Color is blue.
  • After visit, color turns purple.
  • Underlined
  • Inline Level Element
  • On mouseover, cursor changes to pointer.
  • Turns red on active state( mouse keydown)

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.

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

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>     
 ( Absolute Link of 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>
<a href="http://www.techaltum.com" target="_blank">_blank</a>
<a href="webdesigning.html" target="frame1">frame1</a><

Click on the link to see behavior of following target