How to create mail and phone link in HTML?


Formulating mailto and telephone connections in HTML may be a straightforward and efficacious technique to enable virtual guests to promptly communicate with your enterprise. These links furnish a convenient modus operandi for users to transmit an electronic message or establish a phone conversation directly from your webpage, sans the arduous chore of typing out your contact details. This manuscript will comprehensively discuss the necessary procedures to actualize both mailto and phone links in HTML, equipping you with the essential mechanisms to affix these expedient links to your personal website.

Mailto Link

A mailto link in HTML allows you to create a hyperlink that, when clicked, opens the default email client and creates a new email to a specified email address.

Syntax

<a href=mailto:email@example.com>Email Us</a>

The mailto link has the following properties −

  • Mailto − The is the fundamental attribute of a mailto hyperlink and is indicated as mailto:email@example.com.

  • Subject − Using the "subject" property, it is possible to pre-fill the subject line of an email with a specific message, such as "?subject=Subject%20Line".

  • Body − The body script of the electronic mail may be antecedently filled by making use of the "body" attribute, as exemplified: "&body=This%20is%20the%20body%20text".

  • CC− Thou art capable of designating one or more electronic mail domiciles to be encompassed in the "cc" sector by utilizing the "cc" quality, such as: "&cc=email1@example.com,email2@example.com".

  • Bcc − The "bcc" property may be employed to identify one or multiple electronic mail destinations to be encompassed in the "bcc" segment, such as: "&bcc=email1@example.com,email2@example.com".

  • Attach − It is feasible to annex a dossier to the electronic mail via the utilization of the "annex" characteristic, such as: "&annex=file:///C:/example.txt"

Approach

We are going to make use of the mailto link in <a> tag to create a mail link.

Example

The following is the complete code which we are going to look at in this example −

<!DOCTYPE html>
<html>
<head>
   <title>How to create mail and phone link in HTML?</title>
</head>
<body>
   <h4>How to create mail and phone link in HTML?</h4>
   <a href="mailto:email@example.com?subject=Subject%20Line&body=This%20is%20the%20body%20text">Email Us</a>
</body>
</html>

The code is written in HTML and it is designated to showcase the use of mailto attribute. The content in the body section contains a heading tag, <h4>, which displays the text "How to create mail and phone link in HTML?" as a subheading. Beneath the caption, there lies an anchor tag, <a>, which is a hyperlink that is manipulatable to traverse to a webpage or execute an undertaking. In this circumstance, the anchor tag is exploited to forge an electronic mail link, which shall unveil the end-user's automatic email application and draft a fresh email to "email@example.com". The subject and body parameters have also been added to the mailto link to pre-populate the email with a subject and body text.

Tel Link

A tel link in HTML allows you to create a hyperlink that, when clicked, initiates a phone call on mobile devices.

Syntax

<a href="tel:+[country code][phone number]">[Link Text]</a>

Approach

We are going to make use of the tel link in <a> tag to create a phone link.

Example

The following is the complete code which we are going to look at in this example −

<!DOCTYPE html>
<html>
<head>
   <title>How to create mail and phone link in HTML?</title>
</head>
<body>
   <h4>How to create mail and phone link in HTML?</h4>
   <a href="tel:+911234567890">Call Us</a>
</body>
</html>

The code is written in HTML and it is designated to showcase the use of tel attribute. The content in the body section contains a heading tag, <h4>, which displays the text "How to create mail and phone link in HTML?" as a subheading. Beneath the caption, there lies an anchor tag, <a>, which is a hyperlink that is manipulatable to traverse to a webpage or execute an undertaking. In this circumstance, the anchor tag is exploited to forge a telephone link, which shall unveil the end-user's default calling appplication and calls the number +911234567890.

Conclusion

In summation, forging mailto and phone connections in HTML is an uncomplicated undertaking that can vastly enhance the visitor involvement on your digital domain. These connections render it effortless for guests to correspond with your enterprise, and they can be appended to your site in just a few lines of programmatic lexicon. Through adherence to the steps delineated within this manuscript, you can speedily and effortlessly include these advantageous links to your own website and amplify its access to your users. Whether you are a neophyte or an accomplished web designer, these links are an integral facet of producing a polished and user-friendly website.

Updated on: 13-Apr-2023

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements