coding180 icon

Coding180

HTML Element: Hyperlink to a mail client <a>

HTML Element: Hyperlink to a mail client <a>

Tutorials > HTML > Anchor Elements


The "a" element allows directing a hyperlink to a mailing program that we have configured on our computer.

We will make a page that has a hyperlink to a mail client:

<!DOCTYPE html>
<html>

<head>
    <title>Email link - coding180.com</title>
    <meta charset="UTF-8">
</head>

<body>
    <h1>Email link</h1>
    <a href="mailto:coding180@gmail.com">Send mail.</a>
</body>

</html>

When the link is pressed, the email sending program that the device has configured opens and the address that we configured in the link itself followed by the word mailto is available as the recipient of the message:

The syntax for setting a default title and message body is:

<a href="mailto:coding180@gmail.com?subject=post title&body=body
    of the message">Send mail.</a>
    </a>

That is, after specifying the recipient of the mail we have a question mark character '?' followed by the word subject, an equal and the default title that should appear in the mail sending window. Finally we separate with an ampersand '&' the initialization of subject and the body (that is, the body of the message)

We can even add the sending of mail with a copy and with a blind copy to other addresses:

<!DOCTYPE html>
<html>

<head>
    <title>Page title</title>
    <meta charset="UTF-8">
</head>

<body>
    <h1>Claims</h1>
    <a href="mailto:diego1@gmail.com?
subject=the title here&cc=diego2@gmail.com&bcc=diego3@gmail.com&body=This
is the body">Send mail.</a>
</body>

</html>

In this example we send an email to diego1@gmail.com, with a copy to diego2@gmail.com and with a hidden copy to diego3@gmail.com


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel