Klickbare Telefonnummer, Download-Link und Mailto

HTML a-Tag: Download oder Telefonlink

Eine klickbare Telefonnummer erleichtert dem Handybenutzer einen Anruf, ein Download-Link speichert ein PDF auf Anfrage direkt auf dem lokalen Rechner.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Anrufbarer Telefon-Link

HTML hat dem mailto:-Link den tel:-Link nachgeschoben. Die Browser gehen allerdings unterschiedlich vor: Einige werden die Telefon-App mit der Telefonnummer im Display starten und auf einen Klick auf den Anrufen-Button warten, andere werden anrufen ohne groß zu fragen.

<a href="tel:1234567890">1234567890</a>

Für einen internationalen Anruf soll ein +-Zeichen vor der Ländervorwahl sitzen: +11234567890, und besser keine Bindestriche oder Klammern in die Telefonnummer setzen. Anstelle der Telefonnummer kann ebensogut ein Bild innerhalb des a-Elements sitzen, aber auf dem Desktop ohne Verbindung zum Handy fehlt dem Besucher die Telefonnummer. Besser das Bild per CSS content nur für iPhone & Co einsetzen.

<a class="mobilesOnly" href="tel:1234567890">
	1234567890
</a>

Wird die Telefonnummer auf einem Desktop-Rechner oder Notebook aufgerufen, könnte ein Mac die Facetime-App öffnen oder den Anruf vom iPhone aus starten.

Skype hat ein Nicht-Standard-Attribut: callto.

Download-Link im a-Element

Das download-Attribut des a-Tags bietet ein Dokument zum direkten Download an – ohne dass es zuvor im Browserfenster angezeigt wird. Gerade für lange PDF-Dokumente (und insbesondere für die kleinen Monitore von Mobilgeräten) ist ein direkter Download oft wünschenswert. Der direkte Download gilt für alle Dateitypen: PDF, PNG, JPEG, .zip, …, aber das Attribut download ist auf das a-Tag beschränkt.

Ausprobieren? Download PNG

Jeder Browser geht mit dem Download-Link ein wenig anders um. Safari lädt das Angebot direkt, Firefox zeigt ein deutliches modales Fenster und fragt höflich und ausführlich noch einmal nach, ob die Datei tatsächlich geladen werden soll.

<a href="html-a.png" download>Download</a>
HTML a Link mit optionalem direkten Download
HTML a Link mit optionalem direkten Download statt Öffnen im Browser

Edge und Chrome zeigen den Download und das gewählte Zielverzeichnis sehr unauffällig unten im Browserfenster.

mailto-Link

Heute ist das Kontaktformular per PHP-Anwendung auf dem Server zur Normalität geworden, aber es gibt immer noch die Möglichkeit, mittels mailto das Email-Programm anstelle des Kontaktformulars aufzurufen.

So muss der Besucher keine Emailadressen abschreiben.

Die Browser öffnen bei einem mailto-Link das Standard-Emailprogramm des Benutzers.

Email an einen Empfänger
<a href="mailto:name@foo.de">Email-Kontakt</a>
Email an mehrere Empfänger
<a href="mailto:name@foo.de,name@bla.de">Email an zwei Empfänger</a>
Email mit Betreff
<a href="mailto:name@foo.de?subject=Es%22geht%22um%22…">Email mit Betreff "Es geht um"</a>
Email mit Kopie an
<a href="mailto:name@foo.de?cc=name@bla.de">Email mit Kopie an …</a>
Email mit Blindkopie
<a href="mailto:name@foo.de?bcc=name@bla.de">Email mit Blindkopie</a>

Wenn der Betreff der Email eingefügt wird, sollten Sonderzeichen kodiert werden. Ein Leerzeichen wird als %22 geschrieben.

Genauso wie bei einer Email mit Telefonnummer ließe sich anstelle des Texts zwischen dem öffnenden und schließenden a-Tag ein Bild einfügen.

Wer die Wahl hat, auf ein Kontaktformular mittels Anwendung auf dem Server zurückzugreifen, sollte diese Option bevorzugen. Ein Benutzer, der von einem fremden Gerät aus zugreift – z.B. aus einem Internet-Café – würde mit einem mailto-Link Spuren hinterlassen.

Zudem eröffnet die eigene Emailadresse den Spambots einen Weg, an die Emailadresse zu kommen.

Andererseits hat der mailto-Link auch Vorteile: Der Name des Absenders wird korrekt übertragen, während bei Kontaktformularen die Emailadresse auch falsch geschrieben werden kann.