Docs HTML exécutables : Lien mailto

Q: Comment créer un lien e-mail en HTML ?

Utilisez un lien dont le href commence par mailto: suivi de l'adresse : hello@example.com . Un clic ouvre un nouveau message dans l'application de messagerie par défaut du lecteur.

Q: Comment ajouter un objet à un lien mailto ?

Ajoutez-le comme paramètre après ? : mailto:hello@example.com?subject=Order%20question. Encodez les espaces en %20, et reliez les autres paramètres avec &, par exemple ?subject=Hi&body=Hello.

Q: Comment envoyer un lien mailto à plusieurs destinataires ?

Séparez les adresses par des virgules : mailto:ana@example.com,bob@example.com. Utilisez les paramètres cc= et bcc= pour les copies : mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Q: Comment rendre un numéro de téléphone cliquable en HTML ?

Utilisez un lien tel: avec le numéro au format international : +1 555 123 4567 . Sur téléphone, il lance un appel ; sur ordinateur, il ouvre l'application d'appel installée, s'il y en a une.

Comment faire un lien e-mail

Commencez le href du lien par mailto: et l'adresse. Un clic ouvre un nouveau message vers cette adresse dans l'application de messagerie du lecteur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Email link</title>
</head>
<body>
  <p>Questions? Write to <a href="mailto:hello@example.com">hello@example.com</a>.</p>
  <p>Or call <a href="tel:+15551234567">+1 555 123 4567</a>.</p>
</body>
</html>

L'aperçu n'ouvre pas d'autres applications : un clic sur l'un de ces liens y affiche l'adresse qu'il ouvrirait. Sur une vraie page, le premier ouvre un nouvel e-mail et le second lance un appel sur un téléphone.

Utilisez l'adresse elle-même comme texte du lien. Un lecteur sans application de messagerie configurée (courant sur les ordinateurs qui utilisent un webmail dans le navigateur) peut toujours la copier, alors qu'un lien qui dit seulement « Écrivez-nous » le laisse coincé.

Objet, corps, cc et bcc

Un lien mailto peut préremplir davantage le message. Ajoutez des paramètres après un ? et reliez-les avec &, comme une chaîne de requête d'URL :

Paramètre	Remplit	Exemple
`subject`	La ligne d'objet	`?subject=Order%20question`
`body`	Le texte du message	`&body=Hi%20there`
`cc`	Les destinataires en copie	`&cc=sales@example.com`
`bcc`	Les destinataires en copie cachée	`&bcc=log@example.com`

Plusieurs destinataires vont dans la partie adresse, séparés par des virgules : mailto:ana@example.com,bob@example.com.

Les valeurs doivent être encodées pour l'URL : une espace s'écrit %20, un saut de ligne %0D%0A, & s'écrit %26 et ? s'écrit %3F. Le script de cet exemple décode chaque lien pour que vous voyiez ce que reçoit l'application de messagerie :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto parameters</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <a href="mailto:support@example.com?subject=Order%20%23123&body=Hi%2C%0D%0AMy%20order%20has%20not%20arrived.">Report a problem</a>
  <br>
  <a href="mailto:ana@example.com,bob@example.com?cc=boss@example.com&subject=Q3%20plan">Email the team</a>

  <pre id="out"></pre>

  <script>
    const out = document.querySelector('#out');
    for (const a of document.querySelectorAll('a')) {
      const [to, query] = a.getAttribute('href').slice(7).split('?');
      out.textContent += 'To: ' + to + '\n';
      for (const [key, value] of new URLSearchParams(query)) {
        out.textContent += key + ': ' + value + '\n';
      }
      out.textContent += '\n';
    }
  </script>
</body>
</html>

L'objet Order #123 doit s'écrire Order%20%23123 : un # seul terminerait l'URL à cet endroit, et le corps serait perdu. N'utilisez pas non plus + pour les espaces. Dans un lien mailto, + est un signe plus littéral, et beaucoup d'applications de messagerie l'affichent tel quel.

Construire un lien mailto en JavaScript

Encoder à la main est source d'erreurs. encodeURIComponent le fait pour vous. Tapez dans les champs et le lien ci-dessous se met à jour :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto builder</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
    input, textarea { display: block; width: 100%; max-width: 360px; font: inherit; }
    code { display: block; background: #e5e7eb; padding: 8px; word-break: break-all; }
  </style>
</head>
<body>
  <label>To <input id="to" value="hello@example.com"></label>
  <label>Subject <input id="subject" value="Question & feedback"></label>
  <label>Body <textarea id="body" rows="3">Hi,
I have a question.</textarea></label>

  <p><a id="link">Open in mail app</a></p>
  <code id="href"></code>

  <script>
    const fields = ['to', 'subject', 'body'].map((id) => document.getElementById(id));
    const update = () => {
      const [to, subject, body] = fields.map((f) => f.value);
      const href = 'mailto:' + to +
        '?subject=' + encodeURIComponent(subject) +
        '&body=' + encodeURIComponent(body.replace(/\r?\n/g, '\r\n'));
      document.getElementById('link').href = href;
      document.getElementById('href').textContent = href;
    };
    fields.forEach((f) => f.addEventListener('input', update));
    update();
  </script>
</body>
</html>

encodeURIComponent transforme & en %26 et un saut de ligne en %0A ; le replace fait des sauts de ligne la paire %0D%0A qu'attend l'e-mail. Laissez la partie adresse telle quelle : @ et , y sont autorisés sans encodage.

Liens de téléphone avec tel: et sms:

tel: crée un lien d'appel au clic. Écrivez le numéro avec l'indicatif du pays et sans espaces dans le href ; le texte visible peut être formaté comme vous voulez.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .contact { display: flex; flex-wrap: wrap; gap: 8px; }
    .contact a {
      padding: 10px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      color: #111827;
      text-decoration: none;
    }
    .contact a:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="contact">
    <a href="tel:+442079460958">Call +44 20 7946 0958</a>
    <a href="sms:+15551234567">Text +1 555 123 4567</a>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </div>
</body>
</html>

tel:+442079460958 fonctionne depuis n'importe quel pays. Un numéro local comme tel:02079460958 ne marche que pour les appels passés depuis ce pays.
Les traits d'union sont autorisés comme séparateurs (tel:+1-555-123-4567) ; les espaces ne font pas partie du format, alors retirez-les du href.
sms: ouvre l'application de messages. Ajouter un message avec ?body= marche dans beaucoup d'applications, mais la prise en charge varie, alors ne comptez pas dessus.
Sur ordinateur, tel: ouvre une application d'appel si elle est installée (comme FaceTime ou un softphone), et ne fait rien sinon.

Safari sur iPhone transforme de lui-même les numéros de téléphone du texte simple en liens. Si cela casse quelque chose comme un numéro de commande, désactivez-le avec <meta name="format-detection" content="telephone=no">.

Spam et adresses e-mail

Une adresse dans un lien mailto est lisible par n'importe quel robot qui télécharge la page. Des astuces comme écrire hello [at] example [dot] com ou assembler l'adresse en JavaScript arrêtent certains aspirateurs simples, mais rendent aussi le lien plus difficile à utiliser. Un formulaire de contact, présenté dans formulaire HTML, garde complètement l'adresse hors de la page. Pour la plupart des sites, un bon filtre antispam sur la boîte de réception est la réponse la plus simple.

Évitez <form action="mailto:...">. Il dépend de l'application de messagerie du lecteur, envoie les champs encodés pour l'URL et difficiles à lire, et ne vous confirme pas que quoi que ce soit a été envoyé.

Erreurs fréquentes

Oublier mailto:. href="hello@example.com" est un lien relatif vers une page nommée d'après l'adresse.
Des espaces ou des # non encodés dans l'objet ou le corps. Encodez les valeurs avec %20, %23 ou encodeURIComponent.
Utiliser + pour les espaces. Il s'affiche comme un signe plus.
Un second ? au lieu de &. Seul le premier paramètre suit ? ; les autres sont reliés par &.
« Écrivez-nous » comme seul texte, ce qui ne laisse rien à copier aux utilisateurs de webmail.
Des numéros locaux dans tel:. Incluez l'indicatif du pays.

Questions fréquentes

Comment créer un lien e-mail en HTML ?

Utilisez un lien dont le href commence par mailto: suivi de l'adresse : <a href="mailto:hello@example.com">hello@example.com</a>. Un clic ouvre un nouveau message dans l'application de messagerie par défaut du lecteur.

Comment ajouter un objet à un lien mailto ?

Ajoutez-le comme paramètre après ? : mailto:hello@example.com?subject=Order%20question. Encodez les espaces en %20, et reliez les autres paramètres avec &, par exemple ?subject=Hi&body=Hello.

Comment envoyer un lien mailto à plusieurs destinataires ?

Séparez les adresses par des virgules : mailto:ana@example.com,bob@example.com. Utilisez les paramètres cc= et bcc= pour les copies : mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Comment rendre un numéro de téléphone cliquable en HTML ?

Utilisez un lien tel: avec le numéro au format international : <a href="tel:+15551234567">+1 555 123 4567</a>. Sur téléphone, il lance un appel ; sur ordinateur, il ouvre l'application d'appel installée, s'il y en a une.

Pourquoi mon lien mailto ne fait rien ?

Le lien ne fait que transmettre l'adresse à l'application de messagerie par défaut. Si le lecteur n'en a configuré aucune, ce qui est courant sur les ordinateurs qui utilisent un webmail, rien d'utile ne se passe. Affichez l'adresse comme texte du lien pour qu'elle puisse être copiée.

Concepts liés