Links in HTML

Back to: HTML Tutorials

Links in HTML with Examples

In this article, I am going to discuss Links in HTML with Examples. Please read our previous article where we discussed Comments in HTML with Examples. At the end of this article, you will learn everything about HTML Links with Examples.

Links in HTML

The <a> tag is used in Html to define a link and here a stand for the anchor. The anchor tag is used to create links pointing towards files, images, webpages, etc. Inside the anchor element, the href attribute is used to define the destination for links. It is not necessary for a link to always be a text; it can also be an image, button, or any other element.

Links Syntax

The below syntax is used to add links to web pages.
Syntax: <a href=”url”>link text</a>
Example: <a href = “https://www.google.com”>Dummy Link</a>

Target Attribute in HTML Links

The target attribute is used to specify where to open a link. By default, the value of the target attribute is _self. When the value of the target attribute is self, it will open the link in the same window. The Target attribute has four values

  1. In _self, the link is opened in the same window.
  2. In _blank, the link is opened in a new tab.
  3. In _parent, the link is opened in the parent frame.
  4. In _top, the link is displayed in the entire body of the window.

Look at the example below.

<!DOCTYPE html>
<html>
<style>
a{
    display:block;
    margin-bottom:15px;
}
</style>
<body>

<h2>The target Attribute</h2>
<a href="https://www.dotnettutorials.net" target="_self">Value Self</a>
<a href="https://www.dotnettutorials.net" target="_blank">Value Blank</a>
<a href="https://www.dotnettutorials.net" target="_parent">Value Parent</a>
<a href="https://www.dotnettutorials.net" target="_top">Value Top</a>

</body>
</html>
Output:

Links in HTML with Examples

Try each method in the code editor to get a good understanding of the target attributes.

Image and Button as a Link in HTML

Images and Buttons can also be used as a link look at the below example to understand how to add links to an image and button.

<!DOCTYPE html>
<html>
<body>
<p>The image below is a link. Try to click on it.</p>
<a 
href="https://www.istockphoto.com/search/search-by-image?assetid=889083114&include=true&utm_source=unsplash&utm_medium=affiliate&utm_campaign=srp_photos_top&utm_content=https:%2F%2Funsplash.com%2Fs%2Fphotos%2Fhorse&utm_term=horse::search-aggressive-affiliates-v2:a">

<img src="https://media.istockphoto.com/photos/beautiful-horse-in-the-country-picture-id889083114?b=1&k=20&m=889083114&s=170667a&w=0&h=U78gEwFlrL7DLC2llxJk8xCLZR5_GUtaOYn0dP9lTF4=" alt="horse" style="width:300px;height:200px;">
</a>

<p>The button below is a link. Try to click on it.</p>
<a href="https://www.dotnettutorials.net">
<button>Button</button></a>
</body>
</html>
Output:

Image and Button as a Link in HTML

To make the image and button elements link, they are nested inside anchor tags. Everything nested inside the anchor tag is considered a link by the browser.

Link to an Email address in HTML

The mailto is used to create hyperlinks on websites that let users send an email to a specified address directly from an HTML document, rather than copying and pasting it into an email client.

<h2>Contact Us</h2>
<a href="mailto:info@dotnettutorials.net">Send mail</a>
Output:

Link to an Email address in HTML

Link to Contact Number and WhatsApp

We can create a directly callable link or WhatsApp link using an anchor tag.
Href=tel: creates the call link.
href=”https://wa.me/<number> creates the WhatsApp link

Example:
<!DOCTYPE html>
<html>
<body>
<br>
<p>Link to a telephone number</p>

<p><a target="_blank" href="tel:+4733378901">Call Now</a></p>
<p>Link to a whatsapp number</p>
<p><a target="_blank" href="https://wa.me/9197698XXX14">Whatsapp Now</a></p>

</body>
</html>
Output:

Link to Contact Number and WhatsApp

Links Colors

In browsers, links are displayed in three different colors to indicate visited, unvisited and active links.

  1. An unvisited link is blue in color and underlined.
  2. The visited link is purple in color and underlined.
  3. An active link is red in color and underlined.

We can also change the default color for links by using CSS.

Button as Link in HTML

We can also style buttons by using CSS. Look at the example below to understand how to style link buttons.

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: #141414;
  color: orange;
  padding: 15px 20px;
  font-family:arial;
  font-size:18px;
  letter-spacing:1px;
  text-align: center;
  border-radius:8px;
  text-decoration: none;
  display: inline-block;
}
a:hover{
  background-color: white;
  color:#141414;
  border:2px solid orange;
}
</style>
</head>
<body>
<br>
<a href="https://www.dotnettutorials.net" target="_blank">Button Link</a>
</body>
</html>
Output:

Button as Link in HTML

When a user clicks on a button element, he/she will be redirected to dot net tutorials home page because we have added the link to dot net tutorials home page inside the src attribute of the anchor element.

Links Bookmarks in HTML

HTML bookmarks are used to allow readers to quickly navigate to specific sections of a website. If your page is very long, bookmarks can be very useful. To use a bookmark, first, make one and then add a link to it. When the link is clicked, the page will scroll to the bookmark location.

Bookmark links are created with the help of ids. One can add links to bookmarks on another page too. Bookmarks are very useful in navigating across the webpage.

Creating Bookmark
<h2 id=”lesson1″>Lesson1</h2>
<p>This is a lesson</p>

Adding link to bookmark
<a href=”#lesson2″>Jump to Lesson 2</a>

Example:
<!DOCTYPE html>
<html>
<style>
p{
margin-bottom:50px;
}
</style>
<body>

<a href="#lesson2">Jump to Lesson 2</a>
<br>
<a href="#lesson4">Jump to Lesson 4</a>

<h2 id="lesson1">Lesson1</h2>
<p>This is a lesson</p>
<h2 id="lesson2">Lesson2</h2>
<p>This is a lesson</p>
<h2 id="lesson3">Lesson3</h2>
<p>This is a lesson</p>
<h2 id="lesson4">Lesson4</h2>
<p>This is a lesson</p>
<h2 id="lesson5">Lesson5</h2>
<p>This is a lesson</p>
<h2 id="lesson6">Lesson6</h2>
<p>This is a lesson</p>
<h2 id="lesson7">Lesson7</h2>
<p>This is a lesson</p>

</body>
</html>
Output:

Links Bookmarks in HTML

When a user clicks on these links the page will scroll to the corresponding element.

In the next article, I am going to discuss RGB and RGBA in HTML with Examples. Here, in this article, I try to explain Links in HTML with Examples and I hope you enjoy this HTML Links with Examples article.

Leave a Reply

Your email address will not be published. Required fields are marked *