What is Email and phone links in HTML?

HTMLmarkup~5 mins

Email and phone links in HTML

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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:email@example.com">Send Email</a>
<a href="tel:+1234567890">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 'hello@example.com' in the recipient field.

HTML

<a href="mailto:hello@example.com">Email Hello</a>

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

HTML

<a href="tel:+1234567890">Call +1 234 567 890</a>

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

HTML

<a href="mailto:support@example.com?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:contact@example.com" aria-label="Send email to contact@example.com">contact@example.com</a></p>
    <p class="contact">Call us at <a href="tel:+1234567890" aria-label="Call phone number plus one two three four five six seven eight nine zero">+1 234 567 890</a></p>
  </main>
</body>
</html>

OutputSuccess

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.