Email and phone links make it easy for visitors to contact you. When clicked, they automatically open the user's default email client or phone dialer, creating a seamless user experience.
Mailto Links (Email)
The mailto: protocol creates links that open the user's default email client with a new message addressed to your email.
Basic Email Link
basic-mailto.html
<a href="mailto:contact@example.com">Email Us</a>
<a href="mailto:support@example.com">Contact Support</a>
<a href="mailto:info@example.com">info@example.com</a>When users click these links, their email client (like Gmail, Outlook, or Apple Mail) opens with the "To" field already filled in.
Adding a Subject Line
You can pre-fill the subject line by adding ?subject=:
mailto-subject.html
<a href="mailto:support@example.com?subject=Help Request">
Get Support
</a>
<a href="mailto:sales@example.com?subject=Product Inquiry">
Contact Sales
</a>Note: Spaces in the subject should be replaced with %20 for proper URL encoding:
encoded-subject.html
<a href="mailto:info@example.com?subject=General%20Inquiry">
General Inquiry
</a>Adding Email Body Text
You can pre-fill the email body using &body=:
mailto-body.html
<a href="mailto:feedback@example.com?subject=Feedback&body=Hello,%0D%0A%0D%0AI wanted to share my feedback...">
Send Feedback
</a>Special characters in the body:
%20= space%0D%0A= line break (new line)&= separates parameters
Adding CC and BCC Recipients
You can include CC (carbon copy) and BCC (blind carbon copy):
mailto-cc-bcc.html
<!-- CC: carbon copy (visible to all) -->
<a href="mailto:primary@example.com?cc=manager@example.com">
Email with CC
</a>
<!-- BCC: blind carbon copy (hidden from other recipients) -->
<a href="mailto:primary@example.com?bcc=archive@example.com">
Email with BCC
</a>
<!-- Multiple recipients and parameters -->
<a href="mailto:sales@example.com?cc=manager@example.com&bcc=records@example.com&subject=Sales Inquiry">
Complete Email Setup
</a>Multiple Email Recipients
Separate multiple email addresses with commas (no spaces):
mailto-multiple.html
<!-- Multiple primary recipients -->
<a href="mailto:sales@example.com,support@example.com">
Email Sales and Support
</a>
<!-- Multiple CC recipients -->
<a href="mailto:info@example.com?cc=boss@example.com,manager@example.com">
Email with Multiple CCs
</a>Tel Links (Phone Numbers)
The tel: protocol creates links that can dial phone numbers, especially useful on mobile devices.
Basic Phone Link
basic-tel.html
<a href="tel:+1234567890">Call Us: (123) 456-7890</a>
<a href="tel:+18005551234">1-800-555-1234</a>
<a href="tel:+442071234567">+44 20 7123 4567</a>Phone Number Format
Best practices for the tel: protocol:
- Use the international format with country code:
+1234567890 - Include the plus sign (+)
- Remove all spaces, dashes, and parentheses in the href
- Display the number in a user-friendly format in the link text
tel-format-examples.html
<!-- ✅ Good: Clean href, formatted display -->
<a href="tel:+12025551234">(202) 555-1234</a>
<a href="tel:+442012345678">+44 20 1234 5678</a>
<!-- ❌ Avoid: Formatting in href -->
<a href="tel:+1 (202) 555-1234">(202) 555-1234</a>Phone Extensions
You can include extensions or additional digits after a pause:
tel-extensions.html
<!-- Using comma for pause -->
<a href="tel:+12025551234,123">Call Main Office (ext. 123)</a>
<!-- Using semicolon for "wait" -->
<a href="tel:+12025551234;456">Call and Wait for Extension</a>SMS Links (Text Messages)
The sms: protocol can open a text message composer:
sms-links.html
<!-- Basic SMS link -->
<a href="sms:+12025551234">Text Us</a>
<!-- SMS with pre-filled message (iOS) -->
<a href="sms:+12025551234&body=Hello, I have a question">
Text Us Your Question
</a>
<!-- Android uses ? instead of & for the body -->
<a href="sms:+12025551234?body=Hello">Text Us (Android)</a>Note: SMS links work best on mobile devices. Support and behavior can vary by device and operating system.
Practical Examples
Contact Section
contact-section.html
<section>
<h2>Contact Us</h2>
<div>
<h3>Email</h3>
<p>
General: <a href="mailto:info@example.com">info@example.com</a>
</p>
<p>
Support: <a href="mailto:support@example.com?subject=Support Request">
support@example.com
</a>
</p>
</div>
<div>
<h3>Phone</h3>
<p>
Main: <a href="tel:+12025551234">(202) 555-1234</a>
</p>
<p>
Toll Free: <a href="tel:+18005551234">1-800-555-1234</a>
</p>
</div>
<div>
<h3>Text</h3>
<p>
<a href="sms:+12025559999">Send us a text message</a>
</p>
</div>
</section>Footer Contact Information
footer-contact.html
<footer>
<div class="contact-info">
<p>
<strong>Email:</strong>
<a href="mailto:hello@company.com?subject=Website Inquiry">
hello@company.com
</a>
</p>
<p>
<strong>Phone:</strong>
<a href="tel:+15551234567">(555) 123-4567</a>
</p>
<p>
<strong>Emergency:</strong>
<a href="tel:+15559876543">(555) 987-6543</a>
</p>
</div>
</footer>Business Card Style Contact
business-card.html
<div class="business-card">
<h3>John Doe</h3>
<p>Sales Manager</p>
<ul>
<li>
📧 <a href="mailto:john.doe@company.com?subject=Business Inquiry">
john.doe@company.com
</a>
</li>
<li>
📱 <a href="tel:+15551234567">+1 (555) 123-4567</a>
</li>
<li>
💬 <a href="sms:+15551234567">Text me</a>
</li>
</ul>
</div>Security and Privacy Considerations
⚠️ Important Notes:
- Email addresses in HTML are visible to spam bots - consider using contact forms for important addresses
- Never share sensitive information in pre-filled email bodies
- Phone numbers should be published only if you want public calls
- Consider using obfuscation techniques for public-facing emails
Best Practices
✅ Do:
- Use international phone number format with country code
- Display phone numbers in a readable format
- URL-encode special characters in mailto parameters
- Test links on both desktop and mobile devices
- Provide clear context about what the link will do
- Use descriptive link text (not just the email/phone)
❌ Don't:
- Include formatting characters in tel: href values
- Forget to URL-encode spaces and special characters
- Use mailto/tel links for sensitive communications
- Publish email addresses you want to keep spam-free
- Assume all users have email clients or phone capabilities
Accessibility Tips
Make contact links accessible to all users:
accessible-contact.html
<!-- Clear, descriptive link text -->
<a href="mailto:support@example.com">
Email our support team at support@example.com
</a>
<!-- Icon with accessible text -->
<a href="tel:+12025551234" aria-label="Call us at (202) 555-1234">
📞 (202) 555-1234
</a>
<!-- Provide alternative contact methods -->
<p>
Contact us:
<a href="mailto:info@example.com">Email</a> or
<a href="tel:+12025551234">Call (202) 555-1234</a>
</p>Key Takeaways
mailto:creates links that open email clientstel:creates links that dial phone numberssms:creates links for text messages- Use
?subject=and&body=to pre-fill email content - Use international format (+country code) for phone numbers
- URL-encode special characters in mailto parameters
- Be aware of spam and privacy concerns with public emails
- Always test contact links on different devices
What's Next?
Now that you know how to create email and phone links, you're ready to learn about internal page links. In the next lesson, we'll explore how to create anchors and fragment identifiers that let users jump to specific sections within a page.