Understanding links in HTML
Well, you might have seen some text on some websites, that, if clicked, takes you to another web page(or some other website), these are just hyperlinks/hypertext(which is such text, which refers to some other text). This is too not rocket science, but another element that does this for you.
The tag we are going to use here is called the anchor tag HTML denoted as a tag. It takes some attributes, one of which is the HREF attribute, which means that where do we want to refer to this text, we need to put that URL(location) there. There are some other attributes one is the target, with which we can decide whether we want to open the web page on a new tab or on the same tab.
Have a look at the example to understand the anchor element →
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Understanding links</title>
</head>
<body>
<h1>This is a link</h1>
<a href=”https://www.gyanipandit.com/”>Click here to go to gyanipandit.com</a>
</body>
</html>
So, as we can see here in the above code, we are supposed to have a heading and a link. Notice that there is a text ”Click here to go to gyanipandit.com”, and clicking on it, the user will go to the specified URL, which is https://www.gyanipandit.com/
This is pretty easy, right? So, this is the link, clicking on which, the user is redirected somewhere. Right now, if you try to open the file in the browser, the output that we have is somewhat like this –
Well, this is the output that we had expected, but the link is appearing in purple color. Why is it so? Well, this link is a visited link, which means that it is visited before, which is why it is purple in color. For some unvisited links, it appears in blue color. You can try creating some link, which redirects you to such a website, which you may have never visited, and you will find that link in blue color, or you can also refer to the previous example, in which, we discussed the concept of the widget. There also, the link is present in blue color.
So, remember, that the link is purple since it is visited. The unvisited link will be blue. If some link is active, it becomes red.
Now, if you try to click on the link, the referenced thing opens on the same tab. If you want it to open on the new tab, you need to use an attribute, which is called target. The value of this attribute is supposed to be _blank if you want to open it on the new tab. Have a look at the below example, where we have made use of the target attribute, with the _blank value.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Understanding links</title>
</head>
<body>
<h1>This is a link</h1>
<a href=”https://www.gyanipandit.com” target=”_blank”>Click here to go to gyanipandit.com</a>
</body>
</html>
Now, if you try to open the file in the browser, and click on the link, it should now open on the new tab.
So, it is pretty easy to add a link to our webpage, which redirects somewhere. Through the HREF attribute, we are specifying the URL of where the link is going. Well, in the previous example, we used # as a value instead of a link. It means that we are wishing to redirect to the top of this (current) page. If the HREF attribute is not there, then it is not a hyperlink. We can also consider it as a test link.
