Anchor Tag in HTML

The anchor tag also known as hyper-link is one of the very important tags in HTML. It is the tag with which navigation within a website can be established. It is the tag with which links to pages on different web sites could be established.

blog
by Jibran Advani
Published on:
3 August 2021Last updated:
3 August 2021

Basic use of anchor tag.

Have a look at the below syntax which describes the use of anchor tag in its most basic form

1<a href="http://www.google.com">Go to Google</a>
2

As can be seen from above code snippet, in order to use hyper-links on a page, we have to use anchor element. The anchor element is just denoted by character a. Within the the opening tag of the anchor element, we have to pass an attribute i.e. href the value of which would be the relative or exact path to the page to which we want our user to go once the link is clicked.

Usually, relative paths are used when the page where wants to navigate to is located on same sub-domain. In other cases, use of exact path is necessary.

Attributes of the anchor tag

There are quite a few attributes that we can use in an anchor element each of which will behave in a different manner. We will be discussing some of the very common on most used attributes that we can use this element.

"href" attribute

The href attribute lets a user directs to a page, once the link is clicked, which is assigned to this attribute. In the below example, when user clicks the link, the browser will take user to Google's homepage.

1<a href="http://www.google.com">Go to Google</a>
2

It is not necessary that href attribute will always link to other pages. Sometimes, we may want to direct a user to a mail box so he / she can send an email, like the below example:

1<a href="mailto:name@email.com">Go to Google</a>
2

"target" attribute

The target attribute in an anchor element is also a very commonly used attribute. This attribute can accept one of the four pre-defined values. Each value will result in a different behavior. The target attribute is not a substitute for href attribute but rather is an extension to href attribute. The target attribute lets browsers know of the context in which a the link should be opened. Like, on the same page on which link is located or in a new tab or in a new window etc.

With that set, lets have a look at each of the value that can be used for this attribute.

  • _self - This the default value of this property. It means that even without the use of target attribute, the behavior will be as per specifications of this value. This value will open the linked document on the same page on which link is located. The effect of this would be that current page will be replaced by the new page and the link in the browser will also be changed.
  • _blank - This value will open the linked page in new tab, usually. However, users can configure browsers to open in the new window. This value is particularly useful when you do not want the user to move away from your site. This way the link will be opened in a new tab and your page will also be present on the users' browser.
  • _parent - If someone is running more than one instance of the same browsers in which you website is opened, this will let the user to open the link in the parent instance of that browser meaning that if your site is opened in the third instance which is extracted from the second instance, the link will be opened in the second instance. If that is not the case, then it will behave like _self.
  • _top - This will open the link in the top-most instance. If no such instance exists, it will like _self.

With that said, let's have look at syntax for each of the above-mentioned values.

_self

1<a href="http://www.google.com" target="_self">Google</a>
2

_blank

1<a href="http://www.google.com" target="_blank">Google</a>
2

_parent

1<a href="http://www.google.com" target="_parent">Google</a>
2

_top

1<a href="http://www.google.com" target="_top">Google</a>
2

Apart from the above there are some other attributes which can be used in anchor element but these are less commonly used and some of them even require a decent understanding of back-end. Hence, for the sake of completeness, these are mentioned below with their brief use-case:

  • hreflang - it hints the human language of the linked page.
  • download - it prompts the user the user save the link.
  • rel - the relationship of the linked page.
  • type - hints at the linked URL's format with MIME type.

States in anchor element

There are four states in an anchor tag which are described below:

  • hovered - It is the state when cursor is over over the hyper-link. As a result you will be able to see the location where the hyper-link points to at the bottom left of the web page.
  • visited - It is state with which a user can point out whether he / she has already visited the particular link. The default colour of the link is blue and in this state, it turn to purple.
  • active - This is the state when a user clicks the link but has not yet released the mouse button. In this state, the colour of the link will be changed to red. However, it will be a temporary state meaning as soon as the button is released, the red colour will go away.
  • link - This is the default state of the link when it was never clicked before. Its colour will be blue in this state.

We can style the styling of all of the above link states through the use of CSS.

Conclusion

The key take away from this article are as follows:

  • Links are used to link to different pages on the same website or different pages of a different website.
  • The location to which the link should be pointed at is defined in href attribute.
  • We can change the location where the link should open in the browser through the use of target attribute.
  • Links have four states link, visited, hovered, and active, each of which can be targeted separately in CSS and styled as such.
  • Links are useful for implementing navigation in a website.