Email and phone links in HTML - Deep Dive

Overview - Email and phone links

What is it?

Email and phone links are special clickable links on web pages that let users quickly start sending an email or making a phone call. Instead of typing an address or number, users just click the link and their device opens the right app with the info filled in. These links use special formats in the HTML code to work.

Why it matters

Without email and phone links, users would have to copy and paste addresses or numbers manually, which is slow and error-prone. These links make contacting people or businesses easier and faster, improving user experience and increasing the chance of communication. They are especially important on mobile devices where typing is harder.

Where it fits

Before learning email and phone links, you should understand basic HTML links using the tag. After this, you can learn about other special link types like location links or messaging app links, and how to style links with CSS for better design.

Mental Model

Core Idea

Email and phone links are special web links that tell your device to open the email or phone app with the right address or number ready to use.

Think of it like...

It's like having a shortcut button on your desk that, when pressed, opens your mailbox or phone app already addressed to the right person, so you don't have to find the address or dial the number yourself.

┌─────────────┐
│ <a href=>   │
│  Email or   │
│  Phone link │
└─────┬───────┘
      │
      ▼
┌─────────────┐
│ Device app  │
│ (Email or   │
│  Phone)     │
└─────────────┘

Build-Up - 7 Steps

1

Foundation

Basic HTML link structure

Concept: Learn how to create a simple clickable link using the tag in HTML.

In HTML, links are made with the tag. The 'href' attribute holds the link address. For example: Visit Example This creates a clickable text 'Visit Example' that opens the website.

Result

A clickable link appears on the page that opens the specified website when clicked.

Understanding the basic link structure is essential because email and phone links are just special types of these links with different 'href' values.

2

Foundation

What is a mailto link?

Concept: Introduce the 'mailto:' scheme to create email links that open the user's email app.

To make an email link, use 'mailto:' followed by the email address in the href. Example: Email Friend Clicking this opens the default email app with '[e-mail]' in the recipient field.

Result

Clicking the link opens the email app ready to send an email to the specified address.

Knowing that 'mailto:' tells the browser to open an email app helps you create quick contact links without extra programming.

3

Intermediate

Adding subject and body to email links

🤔Before reading on: do you think you can add a subject line to an email link using the href attribute? Commit to yes or no.

Concept: Learn how to pre-fill the email subject and body using parameters in the mailto link.

You can add a subject and body text by adding '?subject=' and '&body=' parameters to the mailto link. Example: Email with Subject Spaces and special characters must be URL encoded (e.g., space as %20).

Result

Clicking the link opens the email app with the recipient, subject, and body fields pre-filled.

Understanding URL parameters in mailto links lets you create more helpful and user-friendly email shortcuts.

4

Intermediate

Creating phone call links with tel:

🤔Before reading on: do you think clicking a phone link on a desktop computer will always start a call? Commit to yes or no.

Concept: Use the 'tel:' scheme to create links that start phone calls on devices that support calling.

Phone links use 'tel:' followed by the phone number. Example: Call Us On smartphones, clicking this opens the phone app with the number ready to dial. On desktops, behavior depends on installed apps.

Result

Clicking the link on a phone opens the dialer with the number filled in, ready to call.

Knowing 'tel:' links improve mobile user experience by making calling just one tap away.

5

Intermediate

Formatting phone numbers in links

Concept: Learn the best practices for writing phone numbers in tel: links for maximum compatibility.

Use the international format starting with '+' and country code, no spaces or dashes. Example: Call Us Avoid letters or special characters to ensure all devices understand the number.

Result

Phone links work reliably across different devices and countries.

Proper formatting avoids call failures and confusion, especially for international users.

6

Advanced

Accessibility considerations for contact links

🤔Before reading on: do you think screen readers can understand email and phone links without extra help? Commit to yes or no.

Concept: Make email and phone links accessible by adding clear labels and using semantic HTML.

Use descriptive link text like 'Email Support' or 'Call Sales' instead of just the email or number. Add ARIA labels if needed: Email Support This helps screen readers and improves usability for all users.

Result

Users with disabilities can understand and use contact links easily.

Accessibility ensures your site is usable by everyone, which is both ethical and often legally required.

7

Expert

Security and privacy with mailto and tel links

🤔Before reading on: do you think exposing email and phone links openly on websites can cause spam or unwanted calls? Commit to yes or no.

Concept: Understand risks of spam and privacy issues from publicly visible email and phone links and ways to mitigate them.

Spammers use bots to scrape email addresses and phone numbers from websites. To reduce this: - Use JavaScript to obfuscate addresses - Use contact forms instead of direct links - Use CAPTCHAs Example of obfuscation: Email Us This hides the address from simple scrapers.

Result

Reduced spam and unwanted contact attempts while keeping links usable for real users.

Balancing usability and privacy is key; knowing these risks helps you protect users and your organization.

Under the Hood

When a user clicks an email or phone link, the browser recognizes the special 'mailto:' or 'tel:' scheme in the href attribute. It then asks the operating system to open the default app registered for that scheme, such as the email client or phone dialer. The app receives the address or number and pre-fills the relevant fields. This process uses the device's URI handling system, which maps schemes to apps.

Why designed this way?

These schemes were created to extend the web's linking ability beyond just websites, enabling direct communication actions. They use simple, standardized URI schemes to keep compatibility across browsers and devices without needing extra software. Alternatives like custom apps or plugins were less universal and harder to maintain.

┌───────────────┐
│ User clicks   │
│ <a href=>     │
└───────┬───────┘
        │
        ▼
┌───────────────┐
│ Browser sees  │
│ 'mailto:' or  │
│ 'tel:' scheme │
└───────┬───────┘
        │
        ▼
┌───────────────┐
│ OS opens app  │
│ registered to │
│ handle scheme │
└───────┬───────┘
        │
        ▼
┌───────────────┐
│ Email client  │
│ or Phone app  │
│ opens with   │
│ fields filled │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does clicking a 'tel:' link always start a phone call on any device? Commit to yes or no.

Common Belief: Clicking a phone link always starts a call immediately on any device.

Reality: On desktops or devices without calling apps, clicking 'tel:' links may do nothing or open an app like Skype if installed, but usually no call starts automatically.

Why it matters: Assuming all users can call directly may lead to broken experiences or confusion on non-phone devices.

Quick: Can you add multiple recipients in a mailto link separated by commas? Commit to yes or no.

Common Belief: You can add multiple email addresses separated by commas in a mailto link to email many people at once.

Reality: Multiple recipients must be separated by commas or encoded properly, but some email clients handle this differently, so it may not always work as expected.

Why it matters: Incorrect formatting can cause the email client to fail to recognize recipients, leading to user frustration.

Quick: Does putting an email address plainly in HTML always expose it to spam bots? Commit to yes or no.

Common Belief: Any visible email address in HTML will be easily collected by spam bots.

Reality: While many bots scrape plain text emails, some advanced bots can also parse JavaScript or obfuscated emails, so no method is foolproof.

Why it matters: Relying on simple obfuscation may give a false sense of security, leading to spam.

Quick: Does adding a subject in a mailto link guarantee all email clients will show it? Commit to yes or no.

Common Belief: All email clients will always show the subject and body pre-filled from a mailto link.

Reality: Some email clients ignore or handle these parameters differently, so the subject or body may not appear as intended.

Why it matters: Expecting consistent behavior across all clients can cause unpredictable user experiences.

Expert Zone

1

Some email clients limit the length of mailto URLs, so very long subjects or bodies may be truncated or ignored.

2

Using tel: links with extensions or pauses requires special characters like commas or semicolons, but support varies widely across devices.

3

Obfuscation techniques for emails can impact accessibility and SEO if not implemented carefully.

When NOT to use

Avoid mailto and tel links when you need to collect structured data or track user interactions precisely; instead, use contact forms or dedicated call buttons with analytics. Also, avoid exposing raw emails or numbers on public pages if spam is a concern; use server-side contact forms or CAPTCHA-protected methods.

Production Patterns

In real websites, mailto and tel links are often combined with JavaScript to track clicks for marketing. Businesses use tel links prominently on mobile-friendly pages to increase calls. Email links sometimes include pre-filled templates for support requests. Obfuscation or contact forms protect emails from spam while maintaining usability.

Connections

URI Schemes

Email and phone links are specific types of URI schemes used to trigger apps.

Understanding URI schemes helps grasp how browsers and devices handle different link types beyond just web URLs.

User Experience Design

Email and phone links improve user experience by reducing effort to contact.

Knowing how to create easy contact points is a key part of designing user-friendly websites.

Privacy and Security

Exposing contact info links relates to privacy risks and spam prevention strategies.

Balancing usability with security is a common challenge across many fields, including web development.

Common Pitfalls

#1 Writing phone numbers with spaces or dashes in tel links causing call failures.

Wrong approach:

Call Us

Correct approach:

Call Us

Root cause:

Misunderstanding that tel links require a clean, international format without spaces or special characters.

#2 Using plain email addresses in HTML without encoding, leading to spam.

Wrong approach:

[e-mail]

Correct approach:

Email Us

Root cause:

Not realizing that plain text emails are easily scraped by bots.

#3 Adding multiple email recipients incorrectly in mailto links.

Wrong approach:

Email Both

Correct approach:

Email Both

Root cause:

Confusing separator characters; semicolons may not work in all clients.

Key Takeaways

Email and phone links use special 'mailto:' and 'tel:' schemes in HTML to open apps directly for contacting.

Proper formatting and URL encoding are essential for these links to work reliably across devices and apps.

Accessibility and privacy should be considered when adding contact links to ensure usability and protect users.

Not all devices or email clients behave the same with these links, so test and design for graceful fallback.

Understanding these links improves user experience by making communication fast and easy on websites.