HTML - Email Links

HTML email links allows us to send an email to a specific address by clicking on a hyperlink. It is not difficult to put an HTML email link on our webpage but it can cause unnecessary spamming problem for the email account. There are people, who can run programs to harvest these types of emails and later use them for spamming in various ways.

Previously, we have learned how to use text and images as a links. In this tutorial, we are going to create an email as a link.

Email Link in HTML

In HTML, the <a> tag provides an option to specify recipient’s email address to send an email. While using <a> tag as an email tag, we will use mailto: email address within href attribute. Following is the syntax of using mailto −

<a href= "mailto: name@email.com"> ... </a>

Example

The following HTML code illustrates how to create an email link using the <a> tag.

<!DOCTYPE html>
<html>
<body>
   <p>
      Creating an HTML Email Link
   </p>
   <a href= "mailto: name@email.com"> Click to Send Mail</a>
</body>
</html>

On executing the code, a link will be displayed on the screen. If a user clicks this link, it launches one pop-up with list of Email Clients (like Gmail, Outlook etc. ) installed on user's computer. If the user do not have any email client installed on their computer then it would not be possible to send email.

Additional Settings for HTML Email Links

HTML also allows to specify a default email subject as well as email body along with the email address to make it more specific.

Example

The following example shows how to use default subject and body.

<!DOCTYPE html>
<html>
<body>
   <p>
      Creating an HTML Email Link
   </p>
   <a href= "mailto: name@email.com ?subject=It is an HTML email link  &body=This mail is generated using HTML email link."> Click here to Send Mail</a>
</body>
</html>

The above code will generate a email link which can send email with predefined subject and body.

Similarly, we can also use the cc and bcc parameters to add carbon copy and blind carbon copy recipients, as shown in the below example −

<!DOCTYPE html>
<html>
<body>
   <p>
      Creating an HTML Email Link
   </p>
   <a href= "mailto: name@email.com ?cc=cc@example.com &bcc=bcc@example.com &subject=It is an HTML email link &body=This mail is generated using HTML email link."> Send email with cc and bcc</a>
</body>
</html>

This will create a link that says "Send email with cc and bcc" and when clicked, it will open the email client with the recipient's address in the "to" field, the cc address in the "Cc" field and the bcc address in the "Bcc" field.

Creating Email Links for Multiple Recipients

It is also possible to add multiple recipients to the email link by separating them with commas, as illustrated in the below HTML code −

<!DOCTYPE html>
<html>
<body>
   <p>
      Creating an HTML Email Link
   </p>
   <a href="mailto:recipient1@example.com, recipient2@example.com">Send email to multiple recipients</a>
</body>
</html>

This will create a link that says "Send email to multiple recipients" and when clicked, it will open the email client with both addresses in the "To" field.

Advertisements