Loading...
HTML Links

HTML Links

In this tutorial, we will learn about hyperlink , use image and email as link in HTML with the help of examples.


A Link is a connection from one page to another page. A web page can contain various links that take you from one page to another.
These links also allow users to jump one section to another section on the same webpage.


HTML links are also known as Hyperlinks.These links don’t have to be text.
A link can be an image or any other HTML element.
The <a> element defines a hyperlink.
The href attribute is the most important attribute of <a> element.

By default, hyperlinks will display as follows in all browsers:

  1. Unvisited link – it is underlined and blue.
  2. Visited link – It is underlined and purple.
  3. Active link – It is underlined and red.

Attributes of <a> Element

Attribute Value Description
href URL It specify the link's destination
target _blank, _self, _parent, _top It specify where to open the link in the new tab/window or the same

Note : A hash # within a hyperlink specifies an html element id to which window should be scrolled.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Hyperlink</title>
  </head>
  <body>
    <a href = "www.algbly.com" target = "_blank">An HTML Link</a>
  </body>
</html>

Output

An HTML Link

Use Image as a link

We can use an image as a link by putting <img> tag inside <a> element.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Image Hyperlink</title>
  </head>
  <body>
    <a href = "www.algbly.com" target = "_blank">
      <img src = "html.jpg" width = "60px">
    </a>
  </body>
</html>

Output


Link to send Email

We can use an email as a link by putting the value mailto: email_address inside href attribute to create a link.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Email Hyperlink</title>
  </head>
  <body>
    <a href = "mailto : algblycode@gmail.com">Send mail</a>
  </body>
</html>

Output

Send mail

Next Tutorial

We hope that this tutorial helped you develop better understanding of the concept of Links in HTML.

Keep Learning : )

In the next tutorial, you'll learn about HTML Block & Inline Tag.

- Related Topics