Email and phone links in HTML

Introduction

Email and phone links let people contact you easily by clicking on your webpage. They open their email app or phone dialer automatically.

You want visitors to send you an email directly from your website.

You want users on mobile devices to call your phone number with one tap.

You have a contact page and want to make your email and phone clickable.

You want to improve user experience by making contact info interactive.

Syntax

HTML

<a href="mailto:[e-mail]">Send Email</a>
<a href="tel:[phone]">Call Us</a>

Use mailto: before the email address to create an email link.

Use tel: before the phone number to create a phone link.

Examples

This link opens the default email app with '[e-mail]' in the recipient field.

HTML

<a href="mailto:[e-mail]">Email Hello</a>

This link opens the phone dialer with the number ready to call.

HTML

<a href="tel:[phone]">Call [phone]</a>

This email link also adds a subject line 'Help Request' automatically.

HTML

<a href="mailto:[e-mail]?subject=Help%20Request">Email Support</a>

Sample Program

This webpage shows two clickable links: one to send an email and one to call a phone number. The links have clear labels and keyboard focus styles for accessibility.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Links Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      background-color: #f9f9f9;
      color: #333;
    }
    a {
      color: #0066cc;
      text-decoration: none;
      font-weight: bold;
    }
    a:hover, a:focus {
      text-decoration: underline;
      outline: 2px solid #0066cc;
      outline-offset: 2px;
    }
    .contact {
      margin-top: 1rem;
      font-size: 1.2rem;
    }
  </style>
</head>
<body>
  <main>
    <h1>Contact Us</h1>
    <p class="contact">Email us at <a href="mailto:[e-mail]" aria-label="Send email to [e-mail]">[e-mail]</a></p>
    <p class="contact">Call us at <a href="tel:[phone]" aria-label="Call phone number plus one two three four five six seven eight nine zero">[phone]</a></p>
  </main>
</body>
</html>

Important Notes

Make sure phone numbers use international format with plus sign for best compatibility.

Use aria-label to describe links clearly for screen readers.

Test phone links on mobile devices to confirm they open the dialer.

Summary

Email and phone links make contacting easy with one click or tap.

Use mailto: for emails and tel: for phone numbers in <a> tags.

Accessibility and clear labels improve user experience for everyone.

Practice

1. What does the mailto: prefix do when used in an <a> tag?

easy

A. It creates a link that opens the user's email program to send an email.

B. It creates a link that calls a phone number.

C. It creates a link that downloads a file.

D. It creates a link that opens a website.

Solution

1. Step 1: Understand the mailto: prefix

   The mailto: prefix in an <a> tag tells the browser to open the default email program when clicked.

2. Step 2: Compare with other prefixes

   The tel: prefix is for phone calls, not emails. Other prefixes like http: open websites.

3. Final Answer:

   It creates a link that opens the user's email program to send an email. -> Option A

4. Quick Check:

   mailto: = email link [OK]

Hint: Remember mailto opens email apps, tel opens phone dialer [OK]

Common Mistakes:

• Confusing mailto with tel prefix
• Thinking mailto opens websites
• Assuming mailto downloads files

2. Which of the following is the correct syntax to create a clickable phone number link in HTML?

easy

A. Call us

B. Call us

C. Call us

D. Call us

Solution

1. Step 1: Identify the correct prefix for phone links

   The correct prefix to create a phone link is tel:. It tells the browser to open the phone dialer.

2. Step 2: Check the syntax of the <a> tag

   The href attribute should be tel:[phone] to work properly.

3. Final Answer:

   <a href="tel:[phone]">Call us</a> -> Option C

4. Quick Check:

   tel: prefix = phone link [OK]

Hint: Use tel: prefix exactly for phone links in href [OK]

Common Mistakes:

• Using phone: instead of tel:
• Using callto: which is not standard
• Misspelling the prefix

3. What will happen when the user clicks this link?

<a href="mailto:[e-mail]">Email us</a>

medium

A. The browser will open the default email app with '[e-mail]' in the recipient field.

B. The browser will open the phone dialer with the number '[e-mail]'.

C. The browser will navigate to the website 'mailto:[e-mail]'.

D. Nothing will happen because the link is invalid.

Solution

1. Step 1: Analyze the href attribute

   The href uses mailto: with an email address, which triggers the email client.

2. Step 2: Understand browser behavior on click

   Clicking the link opens the default email program with the recipient field filled with '[e-mail]'.

3. Final Answer:

   The browser will open the default email app with '[e-mail]' in the recipient field. -> Option A

4. Quick Check:

   mailto: opens email client [OK]

Hint: mailto: opens email client with address filled [OK]

Common Mistakes:

• Thinking it opens a website
• Confusing mailto with tel
• Assuming no action happens

4. Identify the error in this phone link and choose the fix:

<a href="tel[phone]">Call us</a>

medium

A. Change tel to phone: href="phone:[phone]"

B. Add a colon after tel: href="tel:[phone]"

C. Remove tel prefix: href="1234567890"

D. Add double slashes: href="tel://1234567890"

Solution

1. Step 1: Check the href syntax

   The tel prefix must be followed by a colon : to be valid.

2. Step 2: Identify the correct fix

   Adding the colon after tel fixes the link to href="tel:[phone]".

3. Final Answer:

   Add a colon after tel: href="tel:[phone]" -> Option B

4. Quick Check:

   Correct tel: syntax needs colon [OK]

Hint: Always put colon after tel in href [OK]

Common Mistakes:

• Omitting the colon after tel
• Using phone: instead of tel:
• Adding unnecessary slashes

5. You want to create a contact section with both email and phone links that are accessible and clear. Which HTML snippet is best?

hard

A. EmailPhone

B. [e-mail]1234567890

C. Click hereCall now

D. Email SupportCall Support

Solution

1. Step 1: Check for accessibility and clarity

   <a href="mailto:[e-mail]" aria-label="Send email to support">Email Support</a><br><a href="tel:[phone]" aria-label="Call support phone number">Call Support</a> uses clear link text and aria-label attributes to describe the links for screen readers.

2. Step 2: Compare with other options

   <a href="mailto:[e-mail]">[e-mail]</a><br><a href="tel:[phone]">1234567890</a> shows raw contact info but lacks descriptive text. <a href="mailto:[e-mail]">Click here</a><br><a href="tel:[phone]">Call now</a> uses vague text. <a href="mailto:[e-mail]" title="Email">Email</a><br><a href="tel:[phone]" title="Phone">Phone</a> uses title which is less reliable for accessibility.

3. Final Answer:

   <a href="mailto:[e-mail]" aria-label="Send email to support">Email Support</a><br><a href="tel:[phone]" aria-label="Call support phone number">Call Support</a> -> Option D

4. Quick Check:

   Clear text + aria-label = best accessibility [OK]

Hint: Use clear text and aria-label for accessible contact links [OK]

Common Mistakes:

• Using vague link text like 'Click here'
• Not adding aria-labels for screen readers
• Relying only on title attribute