HTML – Anchor

HTML anchor is defined as hyperlinks which help us to navigate between the different webpages. A hyperlink can be anything like an image or any other HTML element.

When you mouse hover any of the hyperlinked text, it will convert it from an arrow to a hand icon. The most important attribute of any of the link is href attribute. On clicking the link text, it will redirect to the specified URL address.

<a href="https://www.google.com">Click me!</a>

Visited, Unvisited and Active State

A link can be of different state – visited, unvisited and active state. 

Visited link is one which the user has already visited. This link is by default underlined and purple. 

An unvisited link is one which the user has still not visited. This link is by default underlined and blue.

An active link is one when the link is clicked. This link is by default underlined and red.


Absolute and Relative URLs

We can provide a link within href in two ways, one is relative and other is absolute. Absolute URL consists of the full web address as we have in the above example.

Relative URL does not contain ‘https://www’ part. It consists of local link i.e a link to the page within the same website.

<h2>Absolute URL</h2>

<a href="https://www.google.com">Click me!</a>


<h2>Relative URL</h2>
<a href="clickme.html">Click me!</a>

Target Attribute

Target is the attribute which decides the target window for the hyperlink. By default, this window opens in the same browser window. We can always control it using attribute values.

Attribute ValueDescription
_blankOpens the link window in a new window or tab
_selfOpens the link window in the same frame
_parentOpens the link window in the parent frame
_topOpens the linked document in the full body of the window.
<a href="clickme.html" target="_blank">Click me!</a>

Use of Base Path

When we link HTML documents related to the same website, it is not required to give URL for every link. <base> tag is used to give a base path for all the links. So, our browser will concatenate given relative path to this base path and will make a complete URL.

<head>

  <title>Base tag Example</title>

 	 <base href = "https://www.google.com/">

</head>

<body>

  <p>Click following link</p>

  <a href = "/search/url" target = "_blank">Search link </a>
</body>

Link Titles

This link title specifies the extra information about an element. This information is most often shown as a tooltip text when the mouse moves over the element.

<a href="https://google.com" target="_blank" title="Go to Google site">Google</a>

Text and Image Link

We can create any link on a text or an image.  We have already gone through the example of a text link.

Now for image link, we require img tag with src path in it.

<a href="https://google.com" target="_blank" title="Go to Google site">
	<img src="/images/google.jpg"/>
</a>

We can also create different links on a single image based on different coordinates available on the image. 

Once different links are attached to different coordinates, we can click different parts of the image to open target documents.These images are known as image maps.We can create these image maps using two ways


Server-side Image Maps:-

Here you simply put your image inside a hyperlink and use ismap attribute which makes it a special image

When the user clicks someplace within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the <a> tag to the web server. The server uses the mouse-pointer coordinates to determine which document to deliver back to the browser.

<a href="https://google.com" target="_blank" title="Go to Google site">
	<img ismap src="/images/google.jpg"/>
</a>

Client-side Image Maps:-

These type of image maps are enabled by usemap attribute of the <img> tag and then using <map>  and <area> extension tag with it.

The value of the usemap attribute is the value which will be used in a <map> tag to link map and image tags. The <map> along with <area> tags define all the image coordinates and corresponding links.

<img src="/images/google.jpg" alt="google site" usemap="#html"/>

<map name = "html">
    <area shape = "circle" coords = "80,80,20" href = "/search" alt = "Search link" target = "_self" />

    <area shape = "rect" coords = "5,5,40,40" alt = "Filter link" href = "/filter" target = "_self" />
</map>

E-mail Link

HTML <a> tag provides us an option to specify an email address to send an email. Along with href attribute, we will use mailto: email address.

<a href="mailto: html@test.com">Send email
</a>

We can also specify a default email subject and email body along with our email address. This will help in controlling the email details from one place only.

<a href="mailto: html@test.com" ?subject = Feedback&body = Message">Send email
</a>

Supporting Browsers

ElementChromeIEFirefoxOperaSafari
<a>YesYesYesYesYes