Emails, Phones & Downloads
What are Protocol Links?
Think of a smart button in a physical store. If you press it, it automatically opens a phone dialer or brings up a mail delivery envelope.In HTML, you can create links that trigger device features directly:
mailto:[email protected]: Opens the user's default email client (like Outlook or Apple Mail) with the recipient's address prefilled.tel:+15555555: Opens the user's phone dialer to call the number (especially useful on mobile browsers).download: An attribute you can add to a link to force the browser to download the file instead of opening it in a new window.Why does it matter?
Adding direct click-to-email and click-to-call links makes it incredibly easy for customers to contact your business. It removes friction, improving your site's user experience on mobile devices.How to write it
Prefix the phone number or email address in thehref with the correct protocol code:
<a href="mailto:[email protected]">Contact Admin</a>
<a href="tel:+1555555">Call Us</a>
📧 mailto:
📞 tel:
⬇️ download
Common Mistakes
href="email:[email protected]" instead of href="mailto:[email protected]". "email:" is not a valid browser protocol!tel: links, always include the country code (like +1 for USA) to ensure it works for international visitors.Quick Reference
<a href="mailto:[email protected]"> — Prefills email client.<a href="tel:+12345678"> — Triggers phone call prompt.<a href="file.pdf" download> — Forces a file download.Your Task
1. Create a link that opens an email to '[email protected]' displaying the text 'Contact Admin'.
2. Create a link to dial '+1555555' displaying 'Dial'.
index.html
Type code above to start the lesson.
Live Preview