How to create email link in html

HtmlHow-ToBeginner · 3 min read

How to Create an Email Link in HTML Easily

To create an email link in HTML, use the <a> tag with the href attribute set to mailto:email@example.com. This makes the email address clickable and opens the user's default email app to send a message.

📐

Syntax

The basic syntax for an email link uses the <a> tag with the href attribute starting with mailto: followed by the email address.

<a>: The anchor tag creates a clickable link.
href="mailto:email@example.com": Specifies the email address to send to.
The text between <a> and </a> is what users see and click.

html

<a href="mailto:someone@example.com">Send Email</a>

Output

Send Email (clickable link)

💻

Example

This example shows a simple email link that users can click to open their email app with the recipient's address filled in.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email Link Example</title>
</head>
<body>
  <p>Contact us by clicking this link:</p>
  <a href="mailto:contact@example.com">Email Us</a>
</body>
</html>

Output

⚠️

Common Pitfalls

Common mistakes when creating email links include:

Forgetting to use mailto: in the href attribute, which makes the link not open the email client.
Not encoding special characters in the email address or subject line.
Using spaces or invalid characters inside the href value.

Always double-check the email address and syntax.

html

<!-- Wrong: missing mailto -->
<a href="someone@example.com">Email</a>

<!-- Right: includes mailto -->
<a href="mailto:someone@example.com">Email</a>

Output

Email (link that opens email client only in the right example)

📊

Quick Reference

Part	Description	Example
<a> tag	Creates a clickable link	<a href="mailto:email@example.com">Email</a>
mailto:	Protocol to open email client	mailto:someone@example.com
Email address	Recipient's email	someone@example.com
Link text	Visible clickable text	Email Us

✅

Key Takeaways

Use mailto: in the href attribute to create an email link.

The link text should clearly indicate it is an email link.

Always check the email address for typos and correct syntax.

Avoid spaces or special characters without encoding in the href value.

Test the link to ensure it opens the default email app as expected.