HTML Links
HTML Links are the most common HTML Tags that we interact in a webpage. In HTML, links are defined using anchor tag <a>
. href
attribute is used to specify the location of new webpage.
Example
Following is a simple example, where the link takes us to a new webpage.
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.tutorialkart.com">TutorialKart</a>
</body>
</html>
In the above example, the value of href
, i.e., https://www.tutorialkart.com
is the location of webpage we will be taken to (which is URL) when we click on the link. TutorialKart
is the anchor text which appears as link on the webpage.
Open HTML Link in New Tab
When you click on the link, the new URL is loaded in the same page. If you like to open the link in a new webpage, you can use target attribute as shown below.
example.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.tutorialkart.com" target="_blank">TutorialKart</a>
</body>
</html>
target="_blank"
tells the browser to load the URL in a new tab.
Default CSS of HTML Link – Anchor Tag
Following is the default CSS of HTML <a> element.
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
color: -webkit-link
usually the color of HTML <a> is blue.
cursor:pointer
displays pointer when you hover the mouse on the link.
text-decoration:underline
draws an underline for the anchor text.
Style HTML Link <a> to look like a button
You can style your HTML link to look like a button or say box.
example.html
<!DOCTYPE html>
<html>
<head>
<style>
a {
background: green;
color: white;
text-decoration:none;
padding:10px;
}
</style>
</head>
<body>
<a href="https://www.tutorialkart.com">TutorialKart</a>
</body>
</html>
Conclusion
In this HTML Tutorial, we learned about <a> tag in HTML.