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

</>
Copy
<!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

</>
Copy
<!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

</>
Copy
<!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.