How to Add a Link, Button and Mailto in HTML Email (With Code)

A link is the most important element in most emails. It takes the reader from your message to the page where something happens: a purchase, a sign-in, a download, a reply. Adding one looks easy, but links in email have their own rules, from how a button is built to how a "mailto" link opens a new message and why some links are rewritten by tracking. This guide shows how to add a link, a button and a mailto link in an HTML email, with working code, how to add a link in Gmail and Outlook without writing code, and how to avoid the mistakes that break links or trigger spam filters.

How to add a link in an HTML email

A link uses the anchor tag. The address goes in the href attribute, and the words the reader clicks go between the tags.

<a href="https://www.example.com/guide" style="color:#0b5fff;text-decoration:underline;">Read the guide</a>

Follow these rules for every link.

• Use the full address, including https://. Relative links such as /guide do not work in email, because there is no site for them to be relative to.
• Prefer https. Links to http pages can trigger warnings, and they are less trusted.
• Write meaningful link text. "Read the guide" is better than "click here". It is clearer for everybody and works with screen readers.
• Style the link inline. Set the colour and underline in the style attribute, because mail apps may restyle links.
• Make sure the visible text and the address agree. If the text shows one web address and the link goes to another, spam filters and readers treat it as phishing.
• Keep the number of links reasonable. A message made only of links looks like spam.

How to add a link without code

Gmail

1. In the compose window, select the text you want to turn into a link.
2. Click the link icon in the formatting toolbar, or press the shortcut for inserting a link.
3. Paste the web address, and click OK.

Outlook

1. Select the text.
2. Choose the Insert tab and then Link (or press the shortcut for inserting a hyperlink).
3. Enter the address and confirm.

In newer versions the controls may sit in a different menu, so look for a chain-link icon. To send a message written in full HTML from Outlook or Gmail, you need a different approach; see HTML email templates.

How to make a button in HTML email

An email button is not a real button element. Forms and buttons are not reliable in email, so a button is a link styled to look like one. The most dependable version places the link inside a table cell that carries the background colour.

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#0b5fff" style="border-radius:6px;">
      <a href="https://www.example.com/start"
         style="display:inline-block;padding:12px 24px;font-family:Arial,sans-serif;
                font-size:16px;color:#ffffff;text-decoration:none;">
        Get started
      </a>
    </td>
  </tr>
</table>

Some versions of Outlook ignore padding on links. The background on the table cell keeps the button visible, but the clickable area may then be only the text. Email developers sometimes add conditional code for Outlook to fix this, and for most messages the simple version is good enough. Whatever you do, keep these points.

• Use a strong contrast between the button text and its background. Do not rely on colour alone to show that it is clickable.
• Make the button large enough to tap. A height of around 44 pixels is a common target on phones.
• Keep the label short and specific: "Reset password", "View your order".
• Include a plain text link beneath the button for people whose app blocks it. Password reset emails often do this; see password reset email best practices.
• Avoid image-only buttons. If images are blocked, the button vanishes.

How to add a mailto link

A mailto link opens the reader's default mail app with a new message already addressed. It is useful for "Contact us" and "Reply to this email" prompts.

<a href="mailto:[email protected]">Email our support team</a>

You can pre-fill more fields by adding parameters after a question mark. Separate them with an ampersand, and encode spaces as %20.

<a href="mailto:[email protected]?subject=Question%20about%20my%20order&amp;body=Hello%2C%20I%20need%20help%20with%20order%20number">
  Ask about your order
</a>

Notes on mailto links:

• It depends on the reader's setup. If the person uses webmail and has no default mail app configured, the link may do nothing or open an unwanted program. Show the plain address as text too.
• Use a shared address, not a personal one, so that replies reach someone. Adding the address in text is also friendly for people who copy it.
• Expect spam. Addresses published in web pages are harvested by bots. In an email to a known recipient this matters less, but do not expose a private address.
• To receive and process the replies automatically, use a unique address per message and an inbound parsing service; see inbound parse and the guide to inbound email processing.

Other link types

• Phone links: tel:+10000000000 opens the phone dialler on a phone. Use your own number in international format.
• Anchor links to a section of the same email are unreliable in many apps, so do not depend on them.
• The unsubscribe link is a normal https link in the footer, and bulk senders should also add the unsubscribe header. See one-click unsubscribe and the layout advice in email footer examples.

Link tracking and what it does to your links

Many sending services rewrite links so that clicks can be counted. The visible link text stays the same, but the address points to the sender's tracking domain, which then redirects the reader. This is convenient for reports, and it has side effects.

• A tracking domain with a poor reputation can drag down the placement of your messages. Using a custom tracking domain on your own domain keeps the link consistent with your brand.
• Security scanners may open tracked links before the reader does. That inflates click counts and can use up one-time links such as magic links and password resets. Do not track links in security emails.
• Rewritten links can look suspicious in the hover preview. A branded tracking domain is easier to trust.

Our email analytics shows clicks per link, and the email open rate guide explains why some engagement numbers are less reliable than they look.

Why links break or get flagged

Best practices checklist

1. Every link starts with https:// and works when tested.
2. Text describes the destination.
3. One main button, with a text link as a backup.
4. A mailto link only where a reply makes sense, with the address also shown as text.
5. Links to domains you control, not to URL shorteners that readers and filters distrust.
6. An unsubscribe link in every marketing message.

References and further reading

• RFC 6068: The mailto URI Scheme
• RFC 3986: Uniform Resource Identifier (URI) Generic Syntax
• RFC 8058: Signaling One-Click Functionality for List Email Headers