How to Create an Email Link in HTML: A Step-by-Step Guide for Beginners

<a href="mailto:[email protected]">Send Message</a>

Let’s break down what this code does:

• <a> – The anchor tag defines a hyperlink on your page. This creates a clickable link for users.

• href – The hypertext reference attribute contains the link URL. For email links, this starts with mailto:

• mailto: – This is followed by the email address you want the message sent to. Make sure to use the full email.

• Send Message – The link text shows to users. This can be changed to any label, like “Email Us” or “Contact Me”.

That’s all there is to it! The mailto: syntax lets the browser know to open the default email app when the link is clicked.

Then the user just needs to hit send to compose a new message to your email address.

Customizing the Email Link

You can customize email links in a few ways:

Change the Link Text

As mentioned above, you can change the visible text to anything that makes sense, like:

<a href="mailto:[email protected]">Email Us</a>

Pre-Fill Subject Line

You can add a subject line that will automatically be included in the new email message:

<a href="mailto:[email protected]?subject=Website Inquiry">Email Us</a>

The ?subject= parameter adds the text after it into the subject field.

Pre-Fill Body Content

In a similar way, you can pre-populate the email body text with a message:

<a href="mailto:[email protected]?body=Hi there! I'd like to learn more about...">Email Us</a> 

The ?body= parameter inserts the given text into the body of the email draft.

CC and BCC

To copy a recipient on the email (either visible or hidden), use the ?cc= and ?bcc= parameters:

<a href="mailto:[email protected][email protected]">Email Us</a>

<a href="mailto:[email protected][email protected]">Email Us</a> 

Attach a File

You can also attach a file from your website to the email with the ?attach= parameter:

<a href="mailto:[email protected]?attach=/images/file.pdf">Email Us</a> 

Just provide the relative path to the file after ?attach=.

Combine Multiple Parameters

You can combine any number of these parameters together, like:

<a href="mailto:[email protected][email protected]&subject=Website Inquiry&body=I have a question...">Email Us</a>

The ampersand & separates each parameter in the link URL.

Email Link Best Practices

Follow these tips when adding email links to your website:

• Use descriptive, action-oriented link text like “Send Message”, “Contact Us”, “Email Support” etc. Don’t just say “Click Here”.

• Make sure the email link visually stands out on the page, usually by underlining and changing color on hover.

• Place email links in easy-to-find locations like the header, footer, or contact page.

• Use mailto links for emails you check frequently. Avoid links to email accounts that aren’t monitored.

• Test that the links work properly before publishing them live on your site.

• Consider adding contact forms as an alternative for users who don’t have email configured.

• If needed for privacy, use contact forms or image-based links instead of plain text email addresses.

Testing Email Links

Before going live with your email links, always test them thoroughly first:

• View code – Inspect that the href attribute contains the correct mailto: link.

• Click link – Navigate to the page and click the link to ensure your email app opens properly.

• Verify details – Check that any pre-filled subject, body text, cc, and attachments are included.

• Check mobile – Certain email apps may function differently. So always test mobile and desktop.

• Confirm live site – Test again after deploying the page live to be safe.

Taking a minute to validate your mailto links will help avoid issues down the road.

When to Use Alternatives

For some situations, an email link may not be the best approach:

• Don’t link to accounts not actively monitored to avoid bouncing emails. Use contact forms instead.

• Avoid links for high-security email addresses to prevent scraping. Use contact forms or obfuscated text links.

• If privacy is a concern, use forms or images of links to avoid exposing plain email text.

• Consider a contact form if you want to require specific fields, like name, phone number, etc.

• Use forms for attachments larger than a few megabytes, which may not work in some email clients.

Overall, plain email links are suitable for general contact addresses you check regularly. But there are cases where a contact form or other alternative may be preferable.

Putting It All Together

Here are the key steps to add a clickable email link in HTML:

1. Decide on link text like “Contact Us” that conveys the purpose.

2. Use the <a href="mailto:[email protected]"> tag structure.

3. Customize with subject, body text, cc, bcc, or attachments as needed.

4. Place the link in a logical spot on the page, like the header or footer.

5. Thoroughly test the link across browsers and devices.

6. Confirm the link works as intended after deploying live.

7. Consider alternatives like contact forms for specific use cases.

And that’s all there is to it! Email links are a great way to make it fast and easy for visitors to contact you.

In just a few minutes, you can add clickable mailto links to your website with HTML.

Follow this guide and soon your visitors will be firing emails your way using the handy email links you provide.