In this lesson, you'll learn how to create hyperlinks that allow users to send emails or make phone calls directly from your web pages. These types of links enhance user interaction by providing quick and easy ways to contact you or your business.

What Are Email and Phone Links?

Email and phone links are specialized hyperlinks that, when clicked, open the user's default email client or dialer application with pre-filled information. This functionality streamlines the process of contacting you, making your website more user-friendly and interactive.

• Email Links: Allow users to send an email to a specified address with a single click.
• Phone Links: Enable users to initiate a phone call directly from their device by clicking the link.

Syntax of Email and Phone Links

1. Email Link

To create an email link, use the <a> tag with the href attribute set to mailto: followed by the email address.

<a href="mailto:csupport@techgrind.io">Send Us an Email</a>

Explanation:

• href="mailto:support@techgrind.io": The href attribute with mailto: scheme specifies that clicking the link will open the user's default email client with the "To" field pre-filled with support@techgrind.io.
• Send Us an Email: The clickable text that users will see and click on.

2. Phone Link

To create a phone link, use the <a> tag with the href attribute set to tel: followed by the phone number.

<a href="tel:+1234567890">Call Us Now</a>

Explanation:

• href="tel:+1234567890": The href attribute with tel: scheme specifies that clicking the link will initiate a phone call to the number +1234567890 using the device's dialer application.
• Call Us Now: The clickable text that users will see and click on.

Examples of Creating Email and Phone Links

Let's explore two practical examples of creating email and phone links.

1. Creating an Email Link

In this example, we'll create a clickable link that opens the user's email client to send an email to support@techgrind.io.

Explanation:

• The href="mailto:support@techgrind.io" attribute specifies that clicking the link will open the user's default email client with the "To" field populated with support@techgrind.io.
• This makes it easy for users to reach out without manually entering your email address.

2. Creating a Phone Link

In this example, we'll create a clickable link that allows users to call +1234567890 directly from their device.

Example: Calling TechGrind.io

Explanation:

• The href="tel:+1234567890" attribute specifies that clicking the link will initiate a phone call to the number +1234567890 using the device's dialer.

By incorporating email and phone links into your web pages, you can facilitate better communication with your audience and make your website more functional and user-friendly.