HTML Email Links.

Email links use the 'mailto:' protocol to automatically open the user's default email client with a pre-filled address.

The Essentials

Use 'mailto:address@example.com' inside the href attribute.

When clicked, it opens software like Outlook, Gmail, or Apple Mail.

You can pre-fill the subject line using '?subject=Hello'.

You can add a body message using '&body=Message'.

Spaces in subjects or bodies must be encoded as %20.

These links work on mobile devices to open the native mail app.

Professional Insights

Email Obfuscation

Spam bots scrape websites for email addresses in 'mailto' links. Some developers use JavaScript or obfuscation tools to hide the address from bots while keeping it visible to users.

Multiple Recipients

You can send an email to multiple people by separating addresses with a comma inside the 'mailto:' string.

User Experience Note

Some users find 'mailto' links annoying if they don't have a local mail app configured. Consider also displaying the email address as plain text nearby.

Subject and Body Limits

Avoid very long subjects or bodies in mailto links, as different browsers and mail clients have different character limits.

Critical Pitfalls

Forgetting the 'mailto:' prefix (e.g., href='info@site.com' instead of href='mailto:info@site.com').

Misspelling the email address.

Using spaces in the URL without encoding them (use %20 instead).

Expecting the email to be sent automatically—the user still has to click 'Send' in their app.

Interactive Lab

Sprint Tasks

Create a link that sends an email to 'support@devpeak.io'

Add a subject line that says 'Feedback'

Loading editor...

Production Preview