HTML Creating Email and Telephone Links

Adding email and telephone links can make it easier for visitors to contact you directly from your website. These links use mailto: and tel: protocols, which trigger email clients and dialer apps respectively. This small feature can greatly enhance user experience, especially on mobile devices where users often click to call or email with just a tap.

HTML Creating Email and Telephone Links Syntax

Explanation of Syntax:

Email Links:
- mailto: is a protocol that opens the user’s default email client with a new draft addressed to the specified email address.
- To customize the email further, you can add subject and body text by appending ?subject= and &body= parameters to the email link.
Telephone Links:
- tel: is a protocol used to trigger the phone app on devices, prompting the user to dial the number specified.
- You can include a country code to ensure it works internationally by using a + symbol before the number.

<!--EMAIL LINK SYNTAX-->
<a href="mailto:email@example.com">Email Us</a>


<!--TELEPHONE LINK SYNTAX-->
<a href="tel:+1234567890">Call Us</a>

HTML
​x
 
<!--EMAIL LINK SYNTAX--><a href="mailto:email@example.com">Email Us</a>​​<!--TELEPHONE LINK SYNTAX--><a href="tel:+1234567890">Call Us</a>

HTML Creating Email and Telephone Links Example Code

Explanation of Code:

Email Link:
- <a href="mailto:support@example.com?subject=Question&body=Hello%20Support%20Team,">email our support team</a>:
  - This line creates an email link that, when clicked, opens the user’s email client and pre-populates the subject with “Question” and the body with “Hello Support Team,” making it easier for users to contact you with a preformatted message.
Telephone Link:
- <a href="tel:+1234567890">call our hotline</a>:
  - This line creates a telephone link that, when clicked, will prompt the user to call the number specified. The +1234567890 includes a country code, which helps ensure compatibility for international users.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
</head>
<body>
  <h1>Contact Us</h1>
  <p>If you have questions, feel free to <a href="mailto:support@example.com?subject=Question&body=Hello%20Support%20Team,">email our support team</a>.</p>
  <p>For urgent matters, you can <a href="tel:+1234567890">call our hotline</a>.</p>
</body>
</html>

HTML
 
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Contact Us</title></head><body>  <h1>Contact Us</h1>  <p>If you have questions, feel free to <a href="mailto:support@example.com?subject=Question&body=Hello%20Support%20Team,">email our support team</a>.</p>  <p>For urgent matters, you can <a href="tel:+1234567890">call our hotline</a>.</p></body></html>

HTML Creating Email and Telephone Links Syntax

HTML Creating Email and Telephone Links Example Code

HTML Labs