Ausführbare HTML-Docs: mailto-Link

Q: Wie erstelle ich einen E-Mail-Link in HTML?

Nimm einen Link, dessen href mit mailto: und der Adresse beginnt: hello@example.com . Ein Klick darauf öffnet eine neue Nachricht im Standard-Mailprogramm des Lesers.

Q: Wie füge ich einem mailto-Link einen Betreff hinzu?

Häng ihn als Query-Parameter nach ? an: mailto:hello@example.com?subject=Order%20question. Kodiere Leerzeichen als %20 und verbinde weitere Parameter mit &, zum Beispiel ?subject=Hi&body=Hello.

Q: Wie schicke ich einen mailto-Link an mehrere Empfänger?

Trenn die Adressen mit Kommas: mailto:ana@example.com,bob@example.com. Für Kopien nimmst du die Parameter cc= und bcc=: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Q: Wie mache ich eine Telefonnummer in HTML anklickbar?

Nimm einen tel:-Link mit der Nummer im internationalen Format: +1 555 123 4567 . Auf Handys startet er einen Anruf; auf dem Desktop öffnet er die installierte Telefonie-App, falls es eine gibt.

So erstellst du einen E-Mail-Link

Lass das href des Links mit mailto: und der Adresse beginnen. Ein Klick darauf öffnet im Mailprogramm des Lesers eine neue Nachricht an diese Adresse.

<!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>

Die Vorschau öffnet keine anderen Apps: Ein Klick auf einen dieser Links zeigt dort die Adresse, die er öffnen würde. Auf einer echten Seite öffnet der erste eine neue E-Mail und der zweite startet auf einem Handy einen Anruf.

Nimm die Adresse selbst als Linktext. Ein Leser ohne eingerichtetes Mailprogramm (häufig auf Desktops, die Webmail im Browser nutzen) kann sie dann immer noch kopieren, und ein Link, auf dem nur „Schreib uns“ steht, lässt ihn im Regen stehen.

Betreff, Text, cc und bcc

Ein mailto-Link kann noch mehr von der Nachricht ausfüllen. Füg nach einem ? Parameter hinzu und verbinde sie mit &, wie bei einem URL-Query-String:

Parameter	Füllt aus	Beispiel
`subject`	Die Betreffzeile	`?subject=Order%20question`
`body`	Den Nachrichtentext	`&body=Hi%20there`
`cc`	Empfänger in Kopie	`&cc=sales@example.com`
`bcc`	Empfänger in Blindkopie	`&bcc=log@example.com`

Mehrere Empfänger kommen in den Adressteil, getrennt durch Kommas: mailto:ana@example.com,bob@example.com.

Die Werte müssen URL-kodiert sein: Ein Leerzeichen ist %20, ein Zeilenumbruch %0D%0A, & ist %26 und ? ist %3F. Das Skript in diesem Beispiel dekodiert jeden Link, damit du siehst, was beim Mailprogramm ankommt:

<!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>

Der Betreff Order #123 muss als Order%20%23123 geschrieben werden: Ein nacktes # würde die URL an dieser Stelle beenden, und der Text ginge verloren. Nimm auch kein + für Leerzeichen. In einem mailto-Link ist + ein echtes Pluszeichen, und viele Mailprogramme zeigen es auch so an.

Einen mailto-Link mit JavaScript bauen

Von Hand zu kodieren ist fehleranfällig. encodeURIComponent erledigt das für dich. Tipp etwas in die Felder, und der Link darunter aktualisiert sich:

<!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 macht aus & ein %26 und aus einem Zeilenumbruch ein %0A; das replace macht aus Zeilenumbrüchen das Paar %0D%0A, das E-Mail erwartet. Lass den Adressteil, wie er getippt wurde: @ und , sind dort ohne Kodierung erlaubt.

Telefonlinks mit tel: und sms:

tel: erzeugt einen Link zum Anrufen. Schreib die Nummer im href mit Ländervorwahl und ohne Leerzeichen; der sichtbare Text kann beliebig formatiert sein.

<!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 funktioniert aus jedem Land. Eine lokale Nummer wie tel:02079460958 funktioniert nur für Anrufer innerhalb dieses Landes.
Bindestriche sind als Trenner erlaubt (tel:+1-555-123-4567); Leerzeichen gehören nicht zum Format, lass sie im href also weg.
sms: öffnet die Nachrichten-App. Eine Nachricht mit ?body= vorzubelegen funktioniert in vielen Apps, aber die Unterstützung ist unterschiedlich, verlass dich also nicht darauf.
Auf dem Desktop öffnet tel: eine Telefonie-App, falls eine installiert ist (etwa FaceTime oder ein Softphone), und macht sonst nichts.

Safari auf dem iPhone macht Telefonnummern in normalem Text von selbst zu Links. Wenn das etwas wie eine Bestellnummer kaputt macht, schalte es mit <meta name="format-detection" content="telephone=no"> ab.

Spam und E-Mail-Adressen

Eine Adresse in einem mailto-Link kann jeder Bot lesen, der die Seite herunterlädt. Tricks wie hello [at] example [dot] com oder das Zusammensetzen der Adresse per JavaScript halten manche einfachen Scraper ab, machen den Link aber auch schwerer zu benutzen. Ein Kontaktformular, erklärt unter HTML Formular, hält die Adresse ganz aus der Seite heraus. Für die meisten Websites ist ein guter Spamfilter im Postfach die einfachere Lösung.

Vermeide <form action="mailto:...">. Es hängt vom Mailprogramm des Lesers ab, verschickt die Felder URL-kodiert und schwer lesbar und gibt dir keine Bestätigung, dass überhaupt etwas gesendet wurde.

Häufige Fehler

mailto: vergessen. href="hello@example.com" ist ein relativer Link auf eine Seite, die wie die Adresse heißt.
Nicht kodierte Leerzeichen oder # in Betreff oder Text. Kodiere Werte mit %20, %23 oder encodeURIComponent.
+ für Leerzeichen verwenden. Es erscheint als Pluszeichen.
Ein zweites ? statt &. Nur der erste Parameter folgt auf ?; die übrigen werden mit & verbunden.
„Schreib uns“ als einziger Text, womit Webmail-Nutzer nichts zum Kopieren haben.
Lokale Telefonnummern in tel:. Gib die Ländervorwahl mit an.

Häufig gestellte Fragen

Wie erstelle ich einen E-Mail-Link in HTML?

Nimm einen Link, dessen href mit mailto: und der Adresse beginnt: <a href="mailto:hello@example.com">hello@example.com</a>. Ein Klick darauf öffnet eine neue Nachricht im Standard-Mailprogramm des Lesers.

Wie füge ich einem mailto-Link einen Betreff hinzu?

Häng ihn als Query-Parameter nach ? an: mailto:hello@example.com?subject=Order%20question. Kodiere Leerzeichen als %20 und verbinde weitere Parameter mit &, zum Beispiel ?subject=Hi&body=Hello.

Wie schicke ich einen mailto-Link an mehrere Empfänger?

Trenn die Adressen mit Kommas: mailto:ana@example.com,bob@example.com. Für Kopien nimmst du die Parameter cc= und bcc=: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Wie mache ich eine Telefonnummer in HTML anklickbar?

Nimm einen tel:-Link mit der Nummer im internationalen Format: <a href="tel:+15551234567">+1 555 123 4567</a>. Auf Handys startet er einen Anruf; auf dem Desktop öffnet er die installierte Telefonie-App, falls es eine gibt.

Warum passiert bei meinem mailto-Link nichts?

Der Link übergibt die Adresse nur an das Standard-Mailprogramm. Wenn der Leser keines eingerichtet hat, was auf Desktops mit Webmail häufig ist, passiert nichts Brauchbares. Zeig die Adresse als Linktext an, damit man sie kopieren kann.

Verwandte Konzepte