How to Create an Email Link in HTML: 8 Steps

You know what’s oddly satisfying? Clicking a link and having an email draft pop open like a polite little
helper that already filled in the boring parts. That’s an email link in HTMLusually powered by the
mailto: schemeand it’s one of the simplest “quality of life” upgrades you can add to a website.

In this guide, you’ll learn how to create an email link in HTML in eight practical steps, including
how to prefill the subject line, add CC/BCC, write a default message, and avoid the classic “why is my link
broken?” encoding mistakes. We’ll also talk about accessibility, real-world quirks, and when a contact form
might be the smarter move.

What Is an Email Link in HTML?

An email link is typically an HTML anchor tag (<a>) whose href starts with
mailto:. When someone clicks it, their device tries to open their default email app and start a new
message addressed to the email you specify. If you add extra parameters, you can prefill fields like subject,
CC, BCC, and even the email body.

Before You Start: A Quick Reality Check (No Buzzkill, Just Facts)

• It depends on the user’s setup. If someone doesn’t have an email client configured (or they only
  use webmail in a browser), mailto: might do nothingor open something they didn’t expect.
• Behavior varies by app. Some email apps handle long bodies, line breaks, or multiple recipients
  differently.
• Spam bots love visible addresses. Publishing an email can invite scraping. You can still use
  mailto:, but consider adding a form or alternative contact method too.

8 Steps to Create an Email Link in HTML

Step 1: Decide the Email Address and the “Human” Link Text

Pick the email address you want messages to go to (like [email protected]) and write link text
that makes sense out of context. “Email Support” beats “Click here” every day of the week.

Good examples:

• Email Support
• Contact the Admissions Team
• Report a Bug to Engineering

Step 2: Create the Basic mailto: Link

Start with the simplest working version. No extras. No fancy stuff. Just a clean email hyperlink.

That’s it. You’ve created an email link in HTML. (Try not to let the power go to your head.)

Step 3: Add a Subject Line (So Users Don’t Send “Hi” and Nothing Else)

You can prefill a subject line by appending a query string with ?subject=. Spaces and special
characters should be URL-encoded so the link doesn’t break.

In plain English: %20 represents a space. (Your keyboard is cool, but URLs are picky.)

Step 4: Prefill the Message Body (Aka: The “Please Include Details” Nudge)

Add a default body with &body=. For line breaks, use encoded newlines like
%0D%0A (carriage return + line feed) or %0A, depending on compatibility needs.

Notice how characters like :, brackets, and line breaks are encoded. That’s what keeps the URL
readable to browsers and email apps.

Step 5: Add CC and BCC (Use SparinglyNobody Likes Surprise Email Guests)

You can prefill CC and BCC using cc= and bcc=. This is handy for routing messages to a
shared inbox, but be thoughtful: CC/BCC can confuse users if overused.

Step 6: Handle Multiple Recipients (And Don’t Start a Comma War)

You can include more than one recipient by separating addresses with commas in the main mailto:
portion. Keep it simple, and test it in the environments your audience actually uses.

Pro tip: If you’re emailing multiple departments, consider whether a single shared address (like
hello@) is cleaner. People love clarity almost as much as they love not being CC’d accidentally.

Step 7: Encode Everything That Isn’t Boring ASCII (Because URLs Have Feelings)

The most common reason mailto links fail is bad encodingespecially for spaces, ampersands, question
marks, and line breaks. If your subject/body contains punctuation, emojis, or non-English characters, encoding
matters even more.

If you build mailto links dynamically (for example, based on a selected product name), let code do the encoding
instead of trying to manually replace characters.

This approach avoids “it works on my laptop but not on my customer’s phone” surprises.

Step 8: Make It Accessible, Test It, and Offer a Backup Option

A good email link is more than a working URL. It should be clear, accessible, and tested.

• Use descriptive link text. Screen reader users often scan links out of context. “Email Support”
  is meaningful; “More” is not.
• Test on mobile and desktop. iOS Mail, Gmail app, Outlook, and default mail clients can behave
  differently.
• Provide an alternative contact method. A contact form, help center, or support portal helps
  users who don’t have a local email client configured.

If you want to be extra thoughtful, you can include the email address in plain text nearby (or as a fallback in
a <noscript> block) so users can still copy it if clicking doesn’t work.

Common Mistakes (So You Don’t End Up Debugging a Space Character at 2 A.M.)

• Forgetting to encode spaces: Use %20 or encoding via code.
• Using & incorrectly: Only the first parameter uses ?; the rest use &.
• Putting raw line breaks in the URL: Use %0D%0A (or encode via code).
• Writing vague link text: “Click here” tells users nothing about what happens next.
• Relying on mailto as your only support channel: Some users simply can’t use it.

Quick Examples You Can Copy

Simple email link

Email link with subject

Email link with subject + body template

Conclusion

Creating an email link in HTML is a small change that can make your site feel more helpful and “finished.”
Start with a basic mailto: anchor, then add subject/body/CC/BCC carefully, encode your content
properly, and test across devices. Most importantly: treat mailto as a convenience feature, not your only
contact strategy. Your users (and your future self) will thank you.

Experience Notes from the Real World (Extra )

In real projects, email links usually start as a quick win and then turn into a tiny rabbit holemostly because
humans are creative and URLs are… not. One common scenario: a team launches a “Email Support” button with a
beautiful prefilled message. It works perfectly in their tests on Chrome desktop. Then a customer on a phone
taps it, and the email app opens with a blank body, a weirdly truncated subject, or a subject that stops at the
first ampersand. That’s not your customer being “bad at phones.” That’s your link telling you it needed better
encoding and a simpler template.

Another thing teams learn fast: the longer the prefilled body, the more fragile it gets. It’s
tempting to write a whole support form inside body= (“Please include your order number, favorite
color, and the name of your first pet”). But long bodies can hit practical limits in some environments, and they
increase the chance that one character (like & or #) breaks the whole link. The best
compromise is usually a short template: a greeting, a couple of labeled fields, and a friendly nudge to include
details.

You’ll also notice that mailto links expose workflow assumptions. Some people love them because
they live in a desktop email client all day. Others don’t, because they use webmail and never set a default
client. On shared computers (like school labs or library machines), mailto might open an app the user doesn’t
recognize, or it might not open anything at all. That’s why experienced site owners nearly always pair mailto
with a backup: a contact form, a help widget, or at least a plain-text address users can copy.

Accessibility is another “real world” lesson. Developers sometimes write link text like “Contact” or “Email,”
because it looks clean in the design. But when you audit the page using a screen reader’s links list, you’ll
see the problem instantly: ten links that all say “Contact.” Contact who? For what? The fix is easymake link
text specific (“Email Billing,” “Email Tech Support,” “Contact Admissions”)and it helps everyone, not just
assistive technology users.

Finally, a surprisingly practical experience: people reply to the prefilled subject more than you
think. A good subject line helps your inbox rules, ticketing systems, and internal triage. “Support request from
website” is better than “Question,” and “Order help: [Order Number]” is better than both. If you can’t capture
the order number automatically, you can still set up the subject to encourage itwithout making the user feel
like they’re doing homework. The goal is simple: make it easy to start the conversation, and easy for your team
to finish it.