HTML-Code für Mailto-Links: Einfach erklärt

Was ist ein Mailto-Link in HTML?

Ein Mailto-Link in HTML ist ein spezieller Hyperlink, der es dir ermöglicht, eine E-Mail-Nachricht direkt aus einer Webseite zu senden. Wenn du auf einen Mailto-Link klickst, wird eine neue E-Mail-Nachricht in deinem Standard-E-Mail-Programm erstellt, an die angegebene E-Mail-Adresse adressiert und mit der optionalen Betreffzeile und dem optionalen Nachrichtentext vorausgefüllt.

Wie funktioniert ein Mailto-Link?

Ein Mailto-Link besteht aus einer speziellen Syntax, die wie folgt aussieht:

<a href="mailto:[email protected]">Klicke hier, um eine E-Mail zu senden</a>

Wenn du auf diesen Link klickst, wird dein E-Mail-Programm geöffnet und eine neue E-Mail-Nachricht erstellt:

• An: [email protected]
• Betreff: (Keine Betreffzeile)
• Nachricht: (Kein Nachrichtentext)

Vorteile von Mailto-Links

Mailto-Links bieten mehrere Vorteile:

• Bequeme Möglichkeit, Kontakt aufzunehmen: Mailto-Links ermöglichen es dir, schnell und einfach eine E-Mail an den angegebenen Empfänger zu senden.
• Zeitersparnis: Mailto-Links sparen dir Zeit, da du den Empfänger nicht manuell eingeben oder den Betreff und den Nachrichtentext nicht kopieren und einfügen musst.
• Erhöhte Konversion: Mailto-Links können die Konversionsraten erhöhen, indem sie es dir leicht machen, mit Unternehmen oder Einzelpersonen in Kontakt zu treten.

Wie schreibe ich einen Mailto-Link in HTML?

Um einen Mailto-Link in HTML zu schreiben, folge diesen Schritten:

Syntax

Die grundlegende Syntax eines Mailto-Links lautet:

<a href="mailto:[email-Adresse]">[Link-Text]</a>

Ersetze [email-Adresse] durch die tatsächliche E-Mail-Adresse und [Link-Text] durch den Text, den du als Link anzeigen möchtest.

Beispiel

Hier ist ein Beispiel für einen Mailto-Link:

<a href="mailto:[email protected]">Kontaktiere uns</a>

Wenn ein Benutzer auf diesen Link klickt, wird sein Standard-E-Mail-Client mit einer neuen E-Mail-Nachricht geöffnet, die an die Adresse [email protected] adressiert ist.

Betreff und Text vordefinieren

Optionalerweise kannst du mit den Attributen subject und body einen Betreff und einen Textvorspann in die E-Mail einfügen:

<a href="mailto:[email protected]?subject=Anfrage zu meinem Blog&body=Hallo Herr/Frau Mustermann,
ich habe eine Frage zu Ihrem Blog-Artikel...">Kontaktiere uns</a>

Weitere Attribute

Zusätzlich zu den bereits erwähnten Attributen kannst du auch die folgenden Attribute verwenden:

• cc: Eine Kopie der E-Mail an eine zusätzliche Adresse senden
• bcc: Eine Blindkopie der E-Mail an eine zusätzliche Adresse senden
• charset: Den Zeichensatz der E-Mail angeben
• headers: Zusätzliche Kopfzeilen in die E-Mail einfügen

Attribute des Mailto-Links

mailto-Attribut

Das wichtigste Attribut ist mailto, das die E-Mail-Adresse festlegt, an die die Mail gesendet werden soll. Du kannst nur eine E-Mail-Adresse pro Mailto-Link angeben.

Weitere Einzelheiten findest du in: HTML-Button-Aktionen: Ein umfassender Leitfaden zur Verbesserung der Benutzerinteraktion

subject-Attribut

Mit dem subject-Attribut kannst du einen Betreff für die E-Mail festlegen. Dies ist nützlich, um dem Empfänger mitzuteilen, worum es bei der Nachricht geht.

body-Attribut

Das body-Attribut ermöglicht es dir, einen vordefinierten Text in die E-Mail-Nachricht einzufügen. Dies kann hilfreich sein, um zusätzliche Informationen oder Anweisungen bereitzustellen.

cc- und bcc-Attribute

Die Attribute cc (carbon copy) und bcc (blind carbon copy) ermöglichen es dir, weitere E-Mail-Adressen anzugeben, an die die E-Mail gesendet werden soll. Die Empfänger, die in das bcc-Feld aufgenommen werden, werden im E-Mail-Header für andere Empfänger nicht sichtbar sein.

Andere Attribute

Neben diesen Hauptattributen kannst du auch die folgenden optionalen Attribute verwenden:

• charset: Legt den Zeichensatz für die E-Mail-Nachricht fest.
• enctype: Legt die Codierung für die E-Mail-Nachricht fest.
• hreflang: Gibt die Sprache der E-Mail-Nachricht an.
• media: Gibt die Medientypen an, auf die der Mailto-Link angewendet werden soll.
• rel: Gibt die Beziehung zwischen dem Mailto-Link und dem aktuellen Dokument an.
• target: Legt das Fenster oder den Frame fest, in dem die E-Mail geöffnet werden soll.
• type: Gibt den MIME-Typ der E-Mail-Nachricht an.

Verwenden von Mailto-Links in HTML-Dokumenten

Sobald du deinen Mailto-Link geschrieben hast, kannst du ihn in dein HTML-Dokument einfügen. Dabei hast du zwei Möglichkeiten:

Inline-Links

Ein Inline-Link öffnet die E-Mail-Anwendung des Lesers sofort, wenn er auf den Link klickt. Dies ist eine einfache und schnelle Möglichkeit, Mailto-Links zu verwenden. Um einen Inline-Link zu erstellen, füge einfach den Mailto-Link in dein HTML ein:

Mehr dazu erfährst du in: So fügen Sie Links in HTML ein

<a href="mailto:[email protected]">Kontaktiere uns</a>

Verlinkter Text

Mit verlinktem Text kannst du einen Teil des Texts in deinem Dokument in einen Mailto-Link verwandeln. So kannst du dem Link einen aussagekräftigeren Aufruf zum Handeln geben. Um verlinkten Text zu erstellen, verwende das folgende Format:

<a href="mailto:[email protected]">Kontaktieren Sie uns noch heute</a>

Öffnen in einem neuen Tab

Manchmal möchtest du vielleicht, dass der Mailto-Link in einem neuen Tab oder Fenster geöffnet wird. Dies verhindert, dass der Leser deine Seite verlässt. Um einen Mailto-Link in einem neuen Tab zu öffnen, füge das Attribut target="_blank" hinzu:

<a href="mailto:[email protected]" target="_blank">Kontaktiere uns</a>

Vorteile der Verwendung von Mailto-Links

mailto-Links bieten zahlreiche Vorteile, die dich bei der Kommunikation per E-Mail unterstützen:

Benutzerfreundlichkeit

• Mailto-Links sind für den Benutzer äußerst bequem. Mit nur einem Klick auf den Link wird ein neues E-Mail-Fenster geöffnet und die E-Mail-Adresse des Empfängers ist bereits ausgefüllt.

Direkte Kommunikation

• Mailto-Links erleichtern die direkte Kommunikation mit bestimmten Personen oder Abteilungen. Du kannst sie auf deiner Website, in Newslettern oder in sozialen Medien bereitstellen, um die Kontaktaufnahme zu vereinfachen.

Keine Umleitung

• Anders als bei Kontaktformularen, die auf eine Zwischenseite weiterleiten, verweisen Mailto-Links direkt auf das E-Mail-Programm des Benutzers. Dies spart Zeit und reduziert Frustration.

Anpassung

• Mailto-Links können mit zusätzlichen Attributen angepasst werden, um beispielsweise den Betreff der E-Mail festzulegen oder eine Kopie an eine weitere E-Mail-Adresse zu senden.

Tracking und Analyse

• Einige E-Mail-Marketing-Plattformen bieten die Möglichkeit, Mailto-Links zu tracken. So kannst du die Leistung deiner E-Mail-Kampagnen analysieren und Optimierungen vornehmen.

Einschränkungen bei der Verwendung von Mailto-Links

Trotz ihrer Einfachheit unterliegen Mailto-Links einigen Einschränkungen:

Spam und Phishing

Mailto-Links können missbraucht werden, um Spam und Phishing-E-Mails zu versenden. Cyberkriminelle können gefälschte Mailto-Links erstellen, die zu Phishing-Websites führen, die persönliche Informationen wie Passwörter oder Bankdaten abgreifen sollen.

Fehlendes Tracking

Im Gegensatz zu anderen Verknüpfungen ermöglichen Mailto-Links kein Tracking. Wenn du auf einen Mailto-Link klickst, wird die E-Mail-Anwendung geöffnet, ohne dass Informationen über den Klick erfasst werden. Dies kann es schwierig machen, die Wirksamkeit von Marketingkampagnen zu messen.

Kein automatisches Ausfüllen

Bei Mailto-Links werden keine Informationen zum E-Mail-Empfänger automatisch ausgefüllt. Der Benutzer muss die E-Mail-Adresse manuell eingeben, was zu Fehlern führen kann.

Inkompatibilität mit mobilen Geräten

Auf mobilen Geräten können Mailto-Links inkompatibel sein oder zu Verwirrung führen. Wenn ein Benutzer auf einen Mailto-Link auf einem Smartphone oder Tablet klickt, wird möglicherweise nicht die richtige E-Mail-App geöffnet.

Für mehr Details, lies auch: HTML bearbeiten: Schritt-für-Schritt-Anleitung für Anfänger

Zugänglichkeitsprobleme

Mailto-Links können für Benutzer mit eingeschränkter Mobilität oder Sehbehinderungen schwer zugänglich sein. Sie funktionieren möglicherweise nicht mit Bildschirmlesegeräten und können für Personen mit Sehbehinderungen schwierig zu erkennen sein.

Verwandte Artikel

• So fügst du schnell und einfach Emojis in deine HTML-Dokumente ein
• HTML-Dropdown-Menüs: Erstellen Sie interaktive Navigationsleisten für Ihre Website
• HTML-Button-Href: So verlinken Sie Schaltflächen
• HTML: Eine Programmiersprache?
• Der ultimative Leitfaden zur Verwendung von HTML-Schaltflächen für Formulareingaben
• Kreuzfahrt im World Wide Web: Internet-gestützte Urlaubsplanung auf hoher See
• Erkunden Sie das
  -Tag in HTML: Verbessern Sie die Benutzererfahrung durch klappbare Inhalte
• HTML-Beispiele: Praktische Anwendung von HTML-Elementen
• Das HTML-Element
  : Struktur und Verwendung
• HTML DL-Element: Strukturieren Sie Begriffe und Definitionen im Web
• HTML-Tabs: Eine umfassende Anleitung zur Verwendung von Registerkarten in Ihren Webseiten
• Das HTML-Attribut "checked": So aktivieren Sie Kontrollkästchen im Handumdrehen
• HTML-Label: Das unsichtbare Element, das Eingabefelder definiert
• Das HTML -Element: Erstellen von Dropdowns und Auswahllisten
• HTML-Fortschrittsbalken: Visuelle Anzeigen für den Fortschritt

Folge uns

Neue Posts

World of Warcraft auf Linux spielen: Eine guide für Abenteurer

Einführung in World of Warcraft

Node.js NVM: Antworten auf die häufigsten Fragen

Entwicklung

Professionelle Gmail-HTML-Signaturen: Erstellen, Gestalten und Nutzen

Marketingstrategien

Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen

Sicherheit und Datenschutz

HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten

SEO-Optimierung

Das HTML-Title-Attribut: Ein Leitfaden zur Optimierung von Titeln für SEO und Benutzerfreundlichkeit

Online-Marketing

HTTP-Statuscodes: Ihre Bedeutung und Verwendung im Web

Einführung in HTTP-Statuscodes

Besucherzähler für Websites: Tracking Ihres Website-Traffics für Erfolg

SEO-Optimierung

Beschleunigen Sie die Dateneingabe mit HTML Datalist

Webentwicklung

HTML in PUG konvertieren: Einfach und schnell gemacht

Webentwicklung

Beliebte Posts