Kontaktdaten auf der Homepage mit HTML

Kategorie: HTML

Auf jeder gewerblichen Webseite befinden sich die Adressdaten der Firma, zu der die Webseite gehört. Die Daten können auf verschiedene Weise durch HTML-Code dargestellt werden. Im folgenden Artikel wird kurz beschrieben, worauf besonders geachtet werden sollte.

address – der korrekte HTML-TAG fĂŒr eine Adresse

Es gibt mit address ein speziell fĂŒr Adressen gedachtes logisches HTML-Element, daher sollte es auch verwendet werden. Der Text innerhalb dieses Elements wird standardmĂ€ĂŸig kursiv dargestellt, was von vielen als optisch unpassend empfunden wird und der Grund dafĂŒr ist, dass dieses HTML-Element von vielen Webentwicklern vermieden wird. Mit einer einzigen Zeile CSS-Code kann die kursive Schriftart jedoch leicht in eine normale Schriftart umgeĂ€ndert werden.

<address>
Max Mustermann <br/>
Musterstrasse 123  <br/>
98765 Musterstadt 
<address> 

Diesen CSS-Code hinzufĂŒgen und die Anschrift wird in normaler und nicht in kursiver Schrift dargestellt:

address {
    font-style: normal;
}
Max Mustermann
Musterstrasse 123
98765 Musterstadt

mailto – direkt eine Email schreiben

Wird mailto im a-Tag hinzugefĂŒgt, öffnet sich beim Klick auf diesen Link sofort das Standardmailprogramm des Users mit der hinterlegten Email-Anschrift als EmpfĂ€nger und der Benutzer kann sofort die korrekte adressierte Email schreiben. Auf den meisten Seiten findet sich nur diese Minimalform des mailto Befehls, allerdings kann diese Funktion noch um einige durchaus nĂŒtzliche Elemente erweitert werden.

<a href="mailto:info@einfache-internetseiten.de">Email an den Autor</a>

Ausprobieren: Email an den Autor

Betreff einfĂŒgen

Es ist unter UmstĂ€nden sinnvoll, direkt einen Betreff vorzugeben, besonders falls man auf mehreren Unterseiten seiner WebprĂ€senz einen mailto-Kontaktlink eingebaut hat. So vermeidet man MissverstĂ€ndnisse, auf einer Angebotsseite könnte man direkt den Betreff Angebotsanfrage einbauen. Oder zum Beispiel auf dieser Seite, gleich den Betreff „Kontaktdaten auf der Homepage mit HTML“ anhĂ€ngen, dass direkt verstĂ€ndlich wird, um was es in der Anfrage geht.

<a href="mailto:info@einfache-internetseiten.de?subject=Kontaktdaten mit HTML">Email an den Autor</a>

Ausprobieren: Email an den Autor mit Betreff

mehrere EmpfÀnger

Möchte man die Email in CC noch an andere EmpfÀnger schicken, gilt folgende Syntax:

<a href="mailto:info@einfache-internetseiten.de?cc=abc@web.de">Email an den Autor</a>

Ausprobieren: Email an den Autor
Dadurch kann eine Email an mehrere EmpfÀnger geschickt werden.

tel: klickbare Telefonnummer auf dem Smartphone

Durch diesen HTML-Code wird die Telefonnummer auf dem Smartphone direkt anklickbar gemacht und muss nicht mehr extra gewÀhlt werden

<a href="tel:+49815123456">0815 123456</a>

FĂŒr deutsche Telefonnummer muss immer ein +49 als LĂ€ndervorwahl vorangestellt werden, die 0 der Vorwahl fĂ€llt weg und die Ziffern werden ohne ZwischenrĂ€ume direkt hintereinander eingetragen. Auf dem normalen Desktop sind diese Telefonnummer auch anklickbar, was zu folgender Fehlermeldung fĂŒhrt, weil mit dem normalen PC ohne zusĂ€tzlich installierte Software normalerweise nicht telefoniert werdern kann.

Um diese sichtbare Verlinkung auf dem PC zu entfernen, kann fĂŒr die Desktopversion die Formatierung als Link rĂŒckgĂ€ngig gemacht werden und die Telefonnnumer erscheint als normale schwarze und nicht unterstrichene Schrift. Und ist somit fĂŒr den User nicht mehr als Link erkennbar. Durch folgenden CSS-Code wird genau das erreicht. Die Telefonnummer ist nun auf Desktop PCs nicht mehr als Link zu erkennen, weil sie schwarz und ohne Unterstreichung dargestellt wird:

@media screen and (min-width: 600px) {
a[href^="tel:"] {
  color: black;
  text-decoration: none;
}
}

Auf einigen mobilen GerĂ€ten werden je nach Betriebssytem Telefonnummern auch ohne entsprechende Formatierung erkannt und somit automatisch verlinkt, ohne dass die oben beschriebene Syntax eingehalten werden muss. Ist diese Funktion nicht erwĂŒnscht oder soll verhindert werden, dass auch normale Ziffern irrtĂŒmlichwerweise in Telefonnummern umgewandelt werden, kann durch diese Angabe in den Metatags, die automatische Verlinkung von Telefonnummern verhindert werden.

<meta name="format-detection" content="telephone=no">

Die Telefonnummern mĂŒssen in diesem Fall, dann wie oben beschriebene manuell in den HTML-Code eingefĂŒgt werden.