Open In App

Difference between linking an image, website, and email address in HTML

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will discuss linking an image, a website, and an email address to a website.

  • The HTML img tag is used to link an image to a website.
  • The HTML anchor tag is used to link a website by adding the path of the website in the hypertext reference (href) attribute.
  • To link an email address, we specify mailto at the beginning of the email address and pass this path in the href attribute of the anchor tag.

Linking an image: The “img” tag is used to add or link an image. The image tag is a self-closing tag which means it does not require a closing tag. It requires a list of attributes such as src and alt.

Syntax:

<img src = "image__source" alt = "alternative__text">

Example: The following example adds an image to a webpage. We have specified the path of the image in the source(src) attribute and an alternative text in the alt attribute. Please refer to the HTML <img> tag for a better understanding.

HTML




<!DOCTYPE html>
<html lang="en">
  
<body>
    <h2 style="color:green;">GeeksforGeeks </h2>
    <img src=
         alt="GeeksforGeeks">
</body>
</html>


 

Output:

Linking website: The anchor tag is used to link a website, we have to specify the path of the website in the href attribute.

Syntax:

<a href = "path"> Link Name </a>

Example: The following code demonstrates linking a website using the above approach. We have added the path of the website, when we click on the text under the anchor tag, it will redirect the page to the specified link.

HTML




<!DOCTYPE html>
<html lang="en">
  
<body>
    <h2>Click the link</h2>
    <a href="https://www.geeksforgeeks.org/">
      GeeksforGeeks
   </a>
</body>
</html>


Output:

Linking email address: To link an email address we specify mailto at the beginning of the email address and pass this path in the href attribute of the anchor tag. 

Syntax:

<a href = "mailto:email__address"> Email Address </a>

Example: The following example demonstrates linking an email. When we click on the displayed link it will redirect our page to the specified mail address. Please refer to the HTML mailto article for a better understanding.

HTML




<!DOCTYPE html>
<html lang="en">
  
<body>
    <h2>Click the link</h2>
    <a href="mailto:feedback@geeksforgeeks.org">
      Email at GeeksforGeeks
    </a>
</body>
</html>


Output:

Difference between linking to an image, a website, and an email address:

linking Image linking Website linking Email Address
Image (img) tag is used to insert the image on the webpage.  Anchor(a) tag is used to link a website to the webpage.  Anchor(a) tag is used to specify the email address of a webpage.
The path or address of the image is placed in the source(src) attribute of the image tag. The path or the address of the website is placed in the hyperlink reference (href) attribute of the anchor tag. The email address is placed in the hyperlink reference (href) attribute with a mailto property at the starting of the email address.


Last Updated : 27 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads