In this tutorial we will show you the solution of HTML link open in new tab, in HTML as we know there are many tags that are used in html to make a webpage or website. Also, to make a website we have link many webpages together, which is done with the help of anchor tag.
But sometimes you see that when you click on the text that is provided in anchor tag, then a webpage opens over the tab of browser which we use.
Hence, because of this we lost some of our data that we fill there. Hence, today our topic is about how to open html links in new tab.
Step By Step Guide On HTML Link Open In New Tab :-
As, anchor tag is used to link files each other. But when you click on these link it override the previous tab. And some developers and designers does not know, how to resolve this problem.
So, there is a target attribute that is used in anchor tag with some value that we discuss in after example, to redirect the link to a new tab.
Here, below we provide you an example with or without target attribute with its value, so that you understand how the codes work.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<style>
a{
width:300px;
height: 100px;
background-color: black;
color: white;
font-size: 25px;
font-weight: lighter;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="http://www.google.com">
Click here to open google
</a>
<br><br>
<a href="http://www.google.com" target="_blank">
here is google also, but in new tab
</a>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Here, before closing our head tag, we use style, which is discussed in next point.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In the body tag, here we create two anchor tags. If you don’t know about anchor tag, then go to our article having details about anchor tag.
- Now, in body we create two anchor tags. Both are mostly same, the difference between them is the target attribute that is used in 2nd anchor tag. And its value that is _blank, this means when you click to the text on browser, then you redirected to link but with blank target.
- The target is used to give the end location which is blank. Blank means blank tab, which refer to next tab.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that you are able to open html link with the help of anchor tag. Anchor tag is literally different from simple because of the usage of target attribute. I hope this tutorial on HTML link open in new tab helps you.
About Riya
