Sie können Kontaktdaten im hCard-Mikroformat im HTML-Quelltext einer Webseite dort platzieren, wo Sie möchten, also dort, wo die Daten auch angezeigt werden sollen.
Dabei haben Sie überraschend viele Freiheiten. Bei der Wahl der HTML-Elemente sind Sie nämlich vergleichsweise frei. Wichtig ist nur, dass Sie die logische Struktur der Daten abbilden, und dass Sie dabei die Feldnamen in Form von class-Attributen in HTML wiedergeben (kleingeschrieben).
Damit eine HTML-Baumstruktur als vCard-Abbildung erkennbar ist, muss sie in ein äußeres HTML-Element eingeschlossen werden, das class="vcard" zugewiesen bekommt. Beispiel:
<div class="vcard"> <!-- Inhalt der Kontaktdaten --> </div>
Da es in HTML ein address-Element gibt, bietet sich aber auch dieses Element an:
<address class="vcard"> <!-- Inhalt der Kontaktdaten --> </address>
Beide Beispiele sind erlaubt, genauso wie <span class="vcard"> oder <body class="vcard"> (letzteres bietet sich an, wenn eine Webseite nichts anderes als Kontaktdaten enthält).
Die vollständige Umsetzung unserer Beispiel-vCard könnte wie folgt aussehen:
<address class="vcard"> <span class="n" style="display: none"> <span class="family-name">Lyse</span> <span class="given-name">Anna</span> </span> <span class="fn">Anna Lyse</span><br> <span class="org">Beispiel-AG</span><br> <span class="adr work"> <span class="street-address">Phantasiestr. 1</span><br> <span class="country-name">D</span>- <span class="postal-code">99991</span> <span class="locality">Nirgendwo</span><br> </span> <span class="tel home voice">+49 999 12345</span> (privat)<br> <span class="tel cell">+49 144 234422</span> (geschäftlich)<br> <span class="tel work fax">+49 999 54321</span> (Fax geschäftlich)<br> <a class="url" href="http://www.example.com/">http://www.example.com/</a><br> <a class="email" href="mailto:anna.lyse@example.com">anna.lyse@example.com</a> </address>
Im Browser sieht das beispielsweise so aus:
Selbstverständlich können Sie die class-Angaben zu den Detaildaten der Kontaktdaten auch mit CSS formatieren. Auch zusätzliche Attribute wie id=, style= oder auch Event-Handler sind innerhalb der Elemente, die ein vcard-spezifisches class-Attribut enthalten, kein Problem. Das Gleiche gilt für ergänzenden Text zwischen solchen Elementen. In unserem Beispiel stehen etwa die Texte (privat), (geschäftlich) usw. für die Kenntlichmachung der Telefoniedaten auf der Webseite außerhalb der für das Mikroformat bedeutungstragenden Elemente.
Beim Namen haben wir ein wenig getrickst. Für das Mikroformat eignet sich eine Struktur aus einem Elternelement mit class="n", das Kindelemente mit den class-Namen given-name und family-name enthält. Für das Mikroformat ist es jedoch sinnvoll, außerdem noch ein Element mit class="fn" (fn steht für full name) zu notieren, dass den gesamten Namen noch mal in der normalen Darstellungsform enthält. Damit der Name aber nicht doppelt auf der Webseite erscheint, haben wir das komplexe span-Konstrukt mit style="display: none" für die Anzeige unsichtbar gemacht.
Daten, die zur Anschrift gehören, können wie in unserem Beispiel in ein Element mit class="adr" als Kindelemente eingeschlossen werden. Einem class-Attribut dürfen auch mehrere Klassennamen zugeordnet werden, und zwar durch Leerzeichen getrennt. In unserem Beispiel haben wir mit class="adr work" kenntlich gemacht, dass es sich um die Geschäftsadresse handelt. Zusätzlich könnte auch ein paralleles Konstrukt mit class="adr home" notiert werden.
Auch bei den Telefonieangaben haben wir im Beispiel von den Mehrfachangaben zum class-Attribut Gebrauch gemacht, z.B. mit <span class="tel home voice">. Bei Telefonieangaben ist noch zu beachten, dass die Feldinhalte, also der Elementinhalt, im internationalen kanonischen Darstellungsformat für Telefonnummern notiert werden sollte. Dieses Format wird von manchen Programmen erkannt, die zwischen Landesvorwahl, Ortsvorwahl und Rufnummer unterscheiden.
Für Internet-Adressen bietet sich selbstredend das a-Element inklusive href-Attribut an. So werden im Beispiel die Mailadresse und die Webadresse der Firma anklickbar gemacht.
Es gibt zahlreiche Möglichkeiten, Kontaktdaten im Rahmen der erlaubten hCard-Syntax noch ganz anders zu strukturieren. Unser obiges Beispiel ist nichts weiter als ein Muster, das für viele Praxisfälle anwendbar ist.