HTML - Email Links

Email Links (mailto)

HTML email links allow users to click on a link and automatically open their default email client with a new message composed to the specified email address.

This is done using the mailto: protocol in the href attribute of an <a> (anchor) tag.

You can also predefine the subject and body of the email using the mailto: protocol. This is done by appending ?subject= and &body= to the email address. Spaces and special characters in the subject and body should be URL-encoded. For example, spaces are encoded as %20.

Syntax

The following HTML code creates a clickable email link that opens the user's default email client to send an email to the specified address:

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

Examples HTML Email Links

Following are some examples that illustrate usage of HTML Email link:

Create Email link using href

The following HTML code illustrates how to create an email link using the href attribute of 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>

Define Subject and Body in Email Link

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

 <!DOCTYPE html> <html> <body> <p> Creating an HTML Email Link </p> <a href="mailto:example@example.com?subject=Hello%20there&body=This%20is%20a%20predefined%20email%20body."> Click here to Send Mail </a> </body> </html>

Define cc and bcc in Email Link

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 > Send email with cc and bcc </a> </body> </html>

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>

Security Concerns

Adding an HTML email link to your webpage is straightforward, but it can expose your email address to spam. Automated programs, known as email harvesters, can scan web pages for email addresses and add them to spam lists. This can result in a significant increase in unwanted emails.

Print Page