How to Create "mailto" Email Links With HTML

Today you’ll learn how to master the invaluable skill of creating clickable email links with HTML.

Seriously? How to make an email link with HTML? Is this 1998?

No, I don’t think so. But seriously, mail links are so simple in their most basic form that it’s easy to forget how to write them (guilty!) even for experienced developers.

What is a mailto link?

This is a mailto link. Click on it, and it automatically launches your computer’s default mail client (e.g. Outlook in Windows).

And here’s how you write the mailto link above with HTML:

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

A mailto email link uses the same code syntax as regular links, by using the anchor tag: <a>

For links you write the URL path inside the href attribute:

<a href="https://www.somewebsite.com"></a>

To use mailto you simply write your email address inside the href attribute:

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

You can replace the @email part with @gmail, @hotmail, or whatever email company you use.


Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Kofi

Share & Discuss on