Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create mail and phone link in HTML?
Creating mailto and tel links in HTML allows users to easily contact you directly from your webpage. A mailto link opens the user's default email client with your email address pre-filled, while a tel link initiates a phone call on mobile devices or opens the default calling application on desktops.
Mailto Links
A mailto link creates a hyperlink that, when clicked, opens the user's default email client and creates a new email message to a specified email address.
Syntax
Following is the basic syntax for creating a mailto link
<a href="mailto:email@example.com">Email Us</a>
You can also include additional parameters to pre-populate the email
<a href="mailto:email@example.com?subject=Subject&body=Message">Email Us</a>
Mailto Parameters
The mailto link supports several parameters to customize the email
subject Pre-fills the subject line using
?subject=Your%20Subjectbody Pre-fills the email body using
&body=Your%20message%20herecc Adds CC recipients using
&cc=email1@example.com,email2@example.combcc Adds BCC recipients using
&bcc=email1@example.com,email2@example.com
Note Use %20 to represent spaces in URLs, and separate multiple parameters with &.
Example Basic Mailto Link
Following example demonstrates a simple mailto link
<!DOCTYPE html> <html> <head> <title>Mailto Link Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Contact Us</h2> <p>Click the link below to send us an email:</p> <a href="mailto:support@example.com">Email Support</a> </body> </html>
When clicked, this link opens the user's default email client with "support@example.com" in the recipient field.
Example Advanced Mailto Link
Following example shows a mailto link with multiple parameters
<!DOCTYPE html>
<html>
<head>
<title>Advanced Mailto Link</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get in Touch</h2>
<p>Send us a message with pre-filled information:</p>
<a href="mailto:contact@example.com?subject=Website%20Inquiry&body=Hello,%20I%20would%20like%20to%20know%20more%20about...&cc=manager@example.com">
Send Inquiry
</a>
</body>
</html>
This link opens an email with the subject "Website Inquiry", a pre-written body message, and includes "manager@example.com" in the CC field.
Tel Links
A tel link creates a hyperlink that, when clicked, initiates a phone call on mobile devices or opens the default calling application on desktop computers.
Syntax
Following is the syntax for creating a tel link
<a href="tel:+1234567890">Call Us</a>
The phone number should include the country code for international compatibility
<a href="tel:+[country code][phone number]">Link Text</a>
Example Basic Tel Link
Following example demonstrates a simple tel link
<!DOCTYPE html> <html> <head> <title>Tel Link Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Call Us Now</h2> <p>Click to call our support team:</p> <a href="tel:+1234567890">+1 (234) 567-8900</a> </body> </html>
On mobile devices, clicking this link will dial the phone number. On desktops, it will open the default calling application if available.
Example Multiple Contact Links
Following example combines both mailto and tel links for comprehensive contact options
<!DOCTYPE html>
<html>
<head>
<title>Contact Links Example</title>
<style>
.contact-info {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.contact-link {
display: inline-block;
margin: 10px 15px 10px 0;
padding: 10px 15px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}
.contact-link:hover {
background: #0056b3;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Information</h2>
<div class="contact-info">
<p>Get in touch with us through any of the following methods:</p>
<a href="mailto:info@company.com?subject=General%20Inquiry" class="contact-link">
? Email Us
</a>
<a href="tel:+1234567890" class="contact-link">
? Call Us
</a>
<a href="mailto:support@company.com?subject=Technical%20Support&body=Please%20describe%20your%20issue:" class="contact-link">
?? Technical Support
</a>
</div>
</body>
</html>
This example provides multiple contact methods with styled buttons for better user experience.
Best Practices
Follow these best practices when creating mailto and tel links
Include country codes in phone numbers for international compatibility (e.g.,
+1for US,+44for UK).URL encode spaces and special characters in mailto parameters using
%20for spaces.Make links descriptive by showing the actual email address or phone number in the link text.
Test on multiple devices to ensure links work correctly on both mobile and desktop platforms.
Provide alternative contact methods since not all users have email clients or calling apps configured.
Comparison
Following table compares mailto and tel links
| Feature | Mailto Links | Tel Links |
|---|---|---|
| Primary Function | Opens email client | Initiates phone call |
| Device Compatibility | All devices with email clients | Mobile devices, some desktops |
| Parameters | subject, body, cc, bcc | Phone number only |
| URL Format | mailto:email@domain.com | tel:+1234567890 |
| User Action Required | Compose and send email | Confirm call initiation |
Conclusion
Mailto and tel links provide convenient ways for users to contact you directly from your website. Mailto links open email clients with pre-filled information, while tel links initiate phone calls on mobile devices. Both link types enhance user experience by eliminating the need to manually copy contact information.
2K+ Views
