❮❮ PREV NEXT ❯❯

HTML - Anchor Tag

While browsing through any website, you might have come across a link. On clicking on the link you would be taken to a different page.

This link can be designed in HTML using an Anchor tag.

Let us understand the Anchor Tag with the below scenario :

Say, you have a website and you want to redirect the users to www.learnerslesson.com. In such case Anchor Tag is used.

Example :

<html>
	<body>
        <a href="https://www.learnerslesson.com">Click on this link to go to learnerslesson.com</a>
	</body>
</html>

Output :

So, in the above example we have designed a webpage that would take us to learnerslesson.com when we click on the below text.

Click on this link to go to learnerslesson.com

And this is achieved using the <a> tag or the anchor tag and its href attribute.

<a href="https://www.learnerslesson.com">Click on this link to go to learnerslesson.com</a>

The href attribute of the <a> tag or the anchor tag is most important, as in href attribute we specify the url of the website we want the user to be redirected to.

Using Images in anchor tag

The use of anchor tag is not just limited to texts but it can also be used with images.

Example :

<html>
	<body>
        <a href="https://www.learnerslesson.com">
        	<img src = "myimage.png" style = "height:150px;width:130px">
        </a>
	</body>
</html>

Output :

So, in the above example, we have defined an image,

<img src = "myimage.png" style = "height:150px;width:130px">

And placed it inside the anchor tag,

<a href="https://www.learnerslesson.com">
	<img src = "myimage.png" style = "height:150px;width:130px">
</a>

Now, when you click on the image, it takes you to learnerslesson.com.

Title attribute in anchor tag

Say you want to provide some more information to the user when they hovers over the text or image as specified in your anchor tag.

In that case the title attribute comes handy.

Let us see it in the below example :

Example :

<html>
	<body>
        <a href="https://www.learnerslesson.com" title="learnerslesson.com">Click on this link to go to learnerslesson.com</a>
	</body>
</html>

Output :

So in the above example if you hover over the text mentioned in the anchor tag(i.e. <a> tag) you can find a toottip display as mentioned in the title i.e. learnerslesson.com.

<a href="https://www.learnerslesson.com" title="learnerslesson.com">Click on this link to go to learnerslesson.com</a>

❮❮ PREV NEXT ❯❯